IE9 HTML5 Canvas support

This Test Drive sample was created in Firefox on Mac.

Canvas Transformations

// Center to screen
ctx.translate(200, 250);

// Control the rotation (try changing it)
var x = 10;
var sine = Math.sin(1 / (x - 1) * Math.PI);
var cose = Math.cos(1 / x * Math.PI);

for (var i = 0; i <= 2 * x; i++) {
var color = 255 / (2 * x) * i;
ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ", 0.66)";

// Draw the "e" without a fillStyle
drawClearE();

// Using the rotation transformation matrix
ctx.transform(cose, sine, -sine, cose, 0, 0);
}

function drawClearE() {
// e
ctx.save();
ctx.beginPath();
ctx.moveTo(70, 0);
ctx.quadraticCurveTo(0, 0, 0, 71);
ctx.quadraticCurveTo(0, 133.5, 70, 133.5);
ctx.quadraticCurveTo(135, 133.5, 142, 84);
ctx.lineTo(93, 84);
ctx.arc(71.5, 84, 21.5, 0, Math.PI, false);
ctx.lineTo(50, 76);
ctx.lineTo(142, 76);
ctx.quadraticCurveTo(142, 0, 70, 0);
ctx.moveTo(50, 53.5);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();

// inner arc of e
ctx.beginPath();
ctx.fillStyle = "white";
ctx.lineTo(93, 53.5);
ctx.arc(71.5, 53.5, 21.5, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();
}