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 https://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='https://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.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300