Working with HTML5 Canvas Element

The new Canvas element of HTML5 is used to draw graphics on the fly via JavaScripting. It is called so because you can draw graphics and images on it and it is just a container which holds them. Just by specifying a canvas element, you wont see anything on the page. To make something visible on the canvas, you have to use some JavaScripts. I find it really interesting since it is easy to understand how things work if we go from the very basics. I'll show some snippets in this post which I used to show different usages of canvas element in HTML5.

First of all, we can markup a canvas as below. here I draw a canvas with specified height and width but this want show an output on your web page


<canvas id="canvas1" width="200" height="100">
</canvas>

I am going to draw another canvas with a blue border of 2 px

<canvas id="canvas2" width="200" height="100" style="border:2px solid #0000FF;">
</canvas>

I am going to draw another canvas with a blue border of 2 px
<canvas id="canvas3" width="200" height="100" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas3"); var cntx=c.getContext("2d"); cntx.fillStyle="#00FF00"; cntx.fillRect(10,10,150,75); </script>

I am going to draw a line in the above canvas using some javascript
<canvas id="canvas4" width="200" height="100" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas4"); var cntx=c.getContext("2d"); cntx.moveTo(0,0); //starting point (x and y) cntx.lineTo(200,50); //ending point (x and y) cntx.stroke(); //draw the line </script>


I am going to draw a circle inside the canvas
<canvas id="canvas5" width="200" height="100" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas5"); var cntx=c.getContext("2d"); cntx.beginPath(); cntx.arc(95,50,50,0,2*Math.PI); //arc(x,y,r,start.stop) cntx.stroke(); //cntx.fill(); will fill the circle with color </script>


I am going to draw some text on my canvas which is in Verdana font and 40px in size
<canvas id="canvas6" width="500" height="150" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas6"); var cntx=c.getContext("2d"); cntx.fillStyle="#FF00FF"; cntx.font="40px Verdana"; cntx.fillText("Text with Fill",20,40); cntx.strokeText("Text with NO Fill",20,80); </script>

I am going to draw a rectangle on my canvas filled with linear gradient
<canvas id="canvas7" width="200" height="100" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas7"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0);//createLinearGradient(x,y,x1,y1) grd.addColorStop(0,"green"); grd.addColorStop(1,"cyan"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); //fillRect(x,y,width,height) </script>









I am going to draw a rectangle on my canvas filled with circular gradient
<canvas id="canvas8" width="200" height="100" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas8"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100);//createRadialGradient(x,y,r,x1,y1,r1) grd.addColorStop(0,"cyan"); grd.addColorStop(1,"blue"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); //fillRect(x,y,width,height) </script>









I am going to display an image on my canvas
<canvas id="canvas9" width="230" height="300" style="border:2px solid #0000FF;"> </canvas> <script> var c=document.getElementById("canvas9"); var ctx=c.getContext("2d"); var img=new Image(); img.src="tilly.jpg"; ctx.drawImage(img,5,5); </script>

you can get the source code from below link

DOWNLOAD IT FROM HERE

or view the outputs directly from the below link

VIEW IN BROWSER


Note that, all the above outputs are working fine in Firefox and Google Chrome web browsers but chrome did not display the image