2012-04-01

IE9 HTML5 Canvas support

This Test Drive sample was created in Firefox on Mac.






function circle(fill, x, y, r, a1, a2, ac) {
ctx.beginPath();
ctx.arc(fill, x, y, r, a1, a2, ac);
ctx.fill();
}

function bez(x0, y0, cp1x, cp1y, cp2x, cp2y, x, y) {
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
}

ctx.lineWidth = 10;

// Draw eye
ctx.fillStyle = "rgb(0,255,0)";
circle(230, 130, 10, 0, 2*Math.PI, true);
circle(230, 130, 10, 0, 2*Math.PI, true);
ctx.fillStyle = "rgb(0,0,255)";
bez(230, 130, 230, 130, 230, 130, 230, 210);

// Draw eye
ctx.fillStyle = "rgb(0,255,0)";
circle(170, 130, 10, 0, 2*Math.PI, true);
circle(170, 130, 10, 0, 2*Math.PI, true);
ctx.fillStyle = "rgb(0,0,255)";
bez(170, 130, 170, 130, 170, 130, 170, 210);


// Draw smile
ctx.fillStyle = "rgb(0,255,0)";
circle(100, 230, 10, 0, 2*Math.PI, true);
circle(200, 380, 10, 0, 2*Math.PI, true);
ctx.fillStyle = "rgb(0,0,255)";
bez(100,230, 100,230, 200,380, 300,230);

// Draw tongue
ctx.fillStyle = "rgb(0,255,0)";
circle(278,351, 10, 0, 2*Math.PI, true);
circle(315,315, 10, 0, 2*Math.PI, true);
ctx.fillStyle = "rgb(0,0,255)";
bez(219,298, 278,351, 315,315, 277,258);

No comments: