Browser <canvas> | Code | Silverlight <canvas>
    context.fillStyle = "rgb(0, 162, 232)";
    context.fillRect(0, 0, 100, 100);
    context.save();
    context.fillStyle = "rgba(255, 127, 39, 0.8)";
    context.fillRect(25, 25, 100, 100);
    context.strokeStyle = "rgb(255, 174, 201)";
    context.lineWidth = 15;
    context.strokeRect(50, 50, 100, 100);
    context.restore();
    context.beginPath()
    context.moveTo(75, 75);
    context.lineTo(175, 75);
    context.lineTo(75, 175);
    context.fill();
    var gradient = context
        .createLinearGradient(150, 100, 150, 200);
    gradient.addColorStop(0/5, "red");
    gradient.addColorStop(1/5, "orange");
    gradient.addColorStop(2/5, "yellow");
    gradient.addColorStop(3/5, "green");
    gradient.addColorStop(4/5, "blue");
    gradient.addColorStop(5/5, "purple");
    context.fillStyle = gradient;
    context.fillRect(100, 100, 100, 100);
    context.fillRect(0, 0, 200, 200);
    context.translate(100, 100);
    context.strokeStyle = "orange";
    context.lineWidth = 2;
    var R = 36;  var r = 8;  var d = 15;  var t = 0;
    var lastx = R + d - r;   var lasty = 0;
    var id = window.setInterval(function() {
        context.beginPath();
        context.moveTo(lastx, lasty);
        var x = ((R - r) * Math.cos(t)) +
            (d * Math.cos(((R - r) / r) * t));
        var y = ((R - r) * Math.sin(t)) -
            (d * Math.sin(((R - r) / r) * t));
        context.lineTo(x, y);
        context.stroke();
        t += 0.1;  lastx = x;  lasty = y;
        if ((2 * 2 * Math.PI) < (t - 0.1)) {
            window.clearInterval(id);
        }
    }, 50);
    var sl = new Image();
    sl.onload = function() {
        for (i = 0; i < 8; i++) {
            context.save();
            context.rotate((i / 8) * (2 * Math.PI));
            context.globalAlpha = (8 - i) / 4;
            context.drawImage(sl, -25, -100, 50, 50);
            context.restore();
        }
    };
    sl.src = "Silverlight.png";