Canvas- Beautiful Image Gallery

Written by @m_k_amin 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 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="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>
</body><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>                                                
                                            

Example:


About @m_k_amin

This user is pending a biography.

M
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members:
advertisement 2