Web and Mobile Apps Dev

Recently, I’m interested in learning about the use of HTML 5 canvas element. The canvas element in HTML 5 simply uses JavaScript to draw pictures and animations, as well as develop games. It basically uses setTimeout or setInternal JavaScript function to create an animation in the canvas element. This feature is available on all modern browsers, except Internet Explorer.

I followed some basic tutorials on the Mozilla Developer Center website and created the simple image below:

Click the image to enlarge

I wrote the following JavaScript statements to form the picture above:

var ctx = canvas.getContext(“2d”);

// Background
ctx.fillStyle = “rgb(200,255,50)”;
ctx.beginPath;
ctx.rect(0, 0, 500, 500);
ctx.closePath();
ctx.fill();

// Face
ctx.fillStyle = “rgba(125,222,152,0.5)”;
ctx.beginPath();
ctx.arc(200,150,100,0,Math.PI*2, true);
ctx.closePath();
ctx.fill();

// Left eye hair
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(170, 75);
ctx.arc(160,75,10,0,Math.PI,true);
ctx.stroke();

// Left eye
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(170, 85);
ctx.arc(160,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Right eye hair
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(250, 75);
ctx.arc(240,75,10,0,Math.PI,true);
ctx.stroke();

// Right eye
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(250, 85);
ctx.arc(240,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Nose
ctx.fillStyle = “rgb(0,0,255)”;
ctx.beginPath();
ctx.moveTo(190, 120);
ctx.lineTo(210, 120);
ctx.lineTo(200, 140);
ctx.closePath();
ctx.fill();

// Mouth
ctx.fillStyle = “#FF0000″;
ctx.beginPath();
ctx.rect(150, 170, 100, 50);
ctx.closePath();
ctx.fill();

// Body
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(200, 400);
ctx.closePath();
ctx.stroke();

// Left Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(130, 340);
ctx.closePath();
ctx.stroke();

// Right Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(270, 340);
ctx.closePath();
ctx.stroke();

// Left Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(130, 450);
ctx.closePath();
ctx.stroke();

// Right Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(270, 450);
ctx.closePath();
ctx.stroke();

As I commented out the code for creating various parts of the image, the basic code structure for each part is very easy to understand. The getContext function on the first line of the code is to get the dimension of the image I’ll be creating. The fillStyle function is to give shapes different colors. The beginPath function begins with a new shape. The rect function is to draw a rectangle on the page. The closePath function is to connect the lines together to form a shape. If you want to draw multiple lines that don’t connect together, you simply don’t put the closePath function at the end of the process just like I did to the left and right eyes hair. The fill function simply fill the shape using the color specified in the fillStyle function. The arc function draws an arc on the page. You can draw a circle using this function as well. The lineTo function draws a line on the page.

You can read more about these functions as well as other functions that used on the canvas element at WHAT Working Group website.