Canvas- Beautiful Image Gallery
Written by 27 June 2013
It is interesting to have an image gallery in your website. HTML5 Canvas 2D graphical features get you ability to make a beautiful image gallery. By combining different HTML5 Canvas features such as drawing images, rectangles, using transparency, clipping and etc. with Javascript language, the following image gallery is made. In the preview box below, click on each image to see it larger and then re-click on it to come back to the images lists. Enjoy!
Code Snippet:
<!-- this script is provided by http://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<body>
<canvas id="myCanvas" width="400" height="230" onmousemove="DefinePaths(event,0)" onclick="DefinePaths(event,1)"></canvas>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
var deg = Math.PI/180
var xx, yy, preview=0
var r=50
var s= document.getElementById('s')
var isin= false
var laoding=0
for (i=1; i<=4; i++)
document.write("<img src='http://www.html5freecode.com/files/HTML5-Canvas-Image-Gallery-"+i+".jpg' style='display:none' id='img"+i+"' onload='loaded()'>")
function loaded(){
laoding++
if (laoding==4) DefinePaths(null)
}
function DefinePaths(event,stat){
if (stat==1 && preview!=2) preview= 1
if (preview==2 && stat==1){
preview=0
ctx.clearRect(0,0,400,250)
document.body.style.background= "white"
}
for (i=1; i<=4; i++){
ctx.beginPath()
xx= 80 + (i%2)*150
yy=Math.floor((i-1)/2)*(r+9)*2 + r+5
ctx.arc(xx, yy, r, 0, 360*deg, false)
if (event!=null){
if (IsInPath(event)){
SelStyle()
}
else DifStyle()
}else DifStyle()
ctx.closePath()
if (preview==0) ctx.stroke()
ctx.save()
ctx.clip()
if (preview==0) ctx.drawImage(document.getElementById("img"+i), xx-r, yy-r, 2*r, 2*r)
if (isin==true){
if (preview==1){
ctx.restore()
document.body.style.background= "rgba(195,195,195,0.6)"
ctx.strokeStyle="black"
ctx.linewidth=10
ctx.globalAlpha=0.9
ctx.drawImage(document.getElementById("img"+i),10, 2, 300, 230)
ctx.globalAlpha=1
ctx.strokeRect( 9, 2, 302, 228)
preview=2
}
if (preview==0){
ctx.fillStyle="rgba(195,195,195,0.4)"
ctx.fillRect( xx-r, yy-r, 2*r, 2*r)
}
}
ctx.restore()
}
}
function IsInPath(event) {
var bb, x, y
bb = cnv.getBoundingClientRect()
x = (event.clientX-bb.left) * (cnv.width/bb.width)
y = (event.clientY-bb.top) * (cnv.height/bb.height)
return ctx.isPointInPath(x,y)
}
function SelStyle(){
ctx.lineWidth= 4
ctx.strokeStyle= "red"
isin= true
}
function DifStyle(){
ctx.lineWidth= 4
ctx.strokeStyle= "darkblue"
isin= false
}
</script>
<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href="https://html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>
</body><a target='_blank' href='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
FOTPU
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!