Performance Tests

Pre-render vs real time render of paths and texts.

HTML

<canvas id='canvas'>your browser does not support html5 canvas</canvas>

JavaScript

// requestAnimationFrame polyfill
(function () {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
        timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());

(function () {
    var canvas = document.getElementById('canvas');
    canvas.width = 300;
    canvas.height = 300;
    var context2D = canvas.getContext('2d');

    var preRenderStuff = document.createElement('canvas');
    preRenderStuff.width = 50;
    preRenderStuff.height = 50;
    var preRenderContext = preRenderStuff.getContext('2d');

    var fps = 0, timeBetweenFrames = 0, lastTime = 0;

    function preRenderCircle(context) {
        context.save();
        context.fillStyle = "grey";
        context.beginPath();
        context.arc(25, 25, 25, 0, 2 * Math.PI, false);
        context.fill();
        context.closePath();
        context.textAlign = "center";
        context.fillStyle = "black";
        context.fillText("Pre Rendered", 25, 25, 50);
        context.restore();
    }

    function realTimeRender(context, color, x, y) {
        context.save();
        context.fillStyle = color;
        context.beginPath();
        context.arc(x + 25, y + 25, 25, 0, 2 * Math.PI, false);
        context.fill();
       ...