Getting Started With Html 5 Canvas

Html 5 canvas is used to draw graphics through a scripting language usually javascript. An html 5 canvas can be created by using <canvas> tag. Html 5 <canvas> tag is supported in all modern browsers like Chrome, Mozilla FireFox, Opera and Safari etc. Let us start by creating an Html 5 canvas having width equal to 600px and height equal to 320px. The scripting language we will use here is javascript:

<canvas id="myCanvas" width="600" height="320"></canvas>

Now that we have created our canvas, let us fill our canvas with some background color.

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#000000";  // fill color of the canvas
ctx.fillRect(0, 0, 600, 320);
</script>

The above javascript code will fill a rectangular region on our canvas having starting x and y co-ordinates (0,0), width and height equal to 600 and 320 respectively (which is basically our complete canvas) with a nice black colour.

Draw a line on html5 canvas using lineTo() method:

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#000000";  // fill color of the canvas
ctx.fillRect(0, 0, 600, 320);
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,150);
ctx.strokeStyle='#FFFFFF';  // line stroke color
ctx.stroke();
</script>

The above javascript code draws a line on canvas starting at (20,20) and ends at (200,150).

Draw a circle on html5 canvas:

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#000000";  // fill color of the canvas
ctx.fillRect(0, 0, 600, 320);
ctx.beginPath();
ctx.arc(300,160,60,0,2*Math.PI);
ctx.strokeStyle='#FFFFFF';  // circle stroke color
ctx.stroke();
</script>

In the above code ctx.arc() begins having center at (300 and 160), radius equal to 60, starting angle equal to 0 and ending angle equal to 2*Math.PI. Here 2*Math.PI means complete 360 degrees. So the above code will draw a complete circle centered at (300 and 160) having radius (60). To draw a half circle, keep the ending angle equal to PI.

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#000000";  // fill color of the canvas
ctx.fillRect(0, 0, 600, 320);
ctx.beginPath();
ctx.arc(300,160,60,0,Math.PI);
ctx.strokeStyle='#FFFFFF';  // circle stroke color
ctx.stroke();
</script>

Draw a rectangle on html5 canvas:

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#000000";  // fill color of the canvas
ctx.fillRect(0, 0, 600, 320);
ctx.rect(20,20,300,150);
ctx.strokeStyle='#FFFFFF';  // rectangle stroke color
ctx.stroke(); 
</script>

The above javascript code will draw a rectangle having starting co-ordinates at (20,20), width equal to 300 and height equal to 150.

Draw an image on html5 canvas using drawImage() method:

<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="image.png";  // source of image to draw
img.addEventListener('load',drawImage,false);
function drawImage(){
    ctx.drawImage(img,0,0,100,100,0,0,300,300);
}
</script>

The parameters passed in the above drawImage() function are explained below:

img - source of image file.
0 - The x co-ordinate of image to start clipping
0 - The y co-ordinate of image to start clipping
100 - The width of clipped image
100 - The height of clipped image
0 - The x co-ordinate of canvas to start drawing image
0 - The y co-ordinate of canvas to start drawing image
300 - The width of drawn image on canvas
300 - The height of drawn image on canvas

Stay tuned for more lessons...