var ctx = document.getElementById("cvs").getContext("2d");

​

//function to convert deg to radian

function acDegToRad(deg)

{

     return deg* (-(Math.PI / 180.0));    

}

​

//set fill color to gray

ctx.fillStyle = "rgb(141,141,141)";

//save the current state with fillcolor

ctx.save();

​

//draw 2's base rectangle

ctx.fillRect(20,200,120,35);

//bring origin to 2's base

ctx.translate(20,200);

//rotate the canvas 35 deg anti-clockwise

ctx.rotate(acDegToRad(35));

//draw 2's slant rectangle

ctx.fillRect(0,0,100,35);

//restore the canvas to reset transforms

ctx.restore();

//set stroke color width and draw the 2's top semi circle

ctx.strokeStyle = "rgb(120,120,120)";

ctx.lineWidth = 35;

ctx.beginPath();

ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);

ctx.stroke();

​

​

//reset canvas transforms

ctx.restore();

​

ctx.beginPath();

ctx.moveTo(162, 20);

ctx.lineTo(162, 320);

ctx.lineTo(300, 320);

ctx.lineTo(300, 20);

ctx.clip();

​

//change color to blue

ctx.fillStyle = "rgb(0,160,212)";

​

​

​

​

ctx.beginPath();

ctx.moveTo(162, 20);

ctx.lineTo(162, 320);

ctx.lineTo(300, 320);

ctx.lineTo(300, 20);

​

​

//change color to blue

ctx.fillStyle = "rgb(0,160,212)";

//save current state of canvas

ctx.save();

//draw long dividing rectangle 

ctx.fillRect(162,20,8,300);

//draw player head circle

ctx.beginPath();

ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));

ctx.fill();

​

//start new path for tummy :)

ctx.beginPath();

ctx.moveTo(170,90);

ctx.lineTo(230,140);

ctx.lineTo(170,210);

ctx.fill();

​

//start new path for hand

//set lineCap and lineJoin to "round", blue color 

//for stroke, and width of 25px

ctx.lineWidth = 25;

ctx.lineCap = "round";

ctx.strokeStyle = "rgb(0,160,212)";

ctx.lineJoin = "round";

ctx.beginPath();

ctx.moveTo(222,150);

ctx.lineTo(230,190);

ctx.lineTo(270,220);

ctx.stroke();

​

//begin new path for drawing leg

ctx.beginPath();

ctx.moveTo(160,210);

ctx.lineTo(195,260);

ctx.lineTo(160,290);

ctx.stroke();