Eu comecei a jogar com a tela HTML5 e esperava fazer alguns jogos com ela. No entanto, assim que comecei a renderizar as coordenadas do mouse, ele quase parou:

http://jsfiddle.net/mnpenner/zHpgV/

Tudo o que fiz foi renderizar 38 linhas e algum texto, deveria ser capaz de lidar com isso, não?

Estou fazendo algo errado? Eu gostaria de ser capaz de renderizar pelo menos 30 FPS, mas para algo assim eu esperaria que fosse capaz de desenhar milhares de vezes.

Ou estou apenas usando a ferramenta errada para o trabalho? O WebGL está pronto para a tarefa? Por que um seria muito mais lento que o outro?

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function(m, n) {
        return args[n];
    });
};
var $canvas = $('#canvas');
var c = $canvas[0].getContext('2d');
var scale = 20;
var xMult = $canvas.width() / scale;
var yMult = $canvas.height() / scale;
var mouseX = 0;
var mouseY = 0;
c.scale(xMult, yMult);
c.lineWidth = 1 / scale;
c.font = '1pt Calibri';

function render() {
    c.fillStyle = '#dcb25c';
    c.fillRect(0, 0, scale, scale);
    c.fillStyle = '#544423';
    c.lineCap = 'square';
    for (var i = 0; i <= 19; ++i) {
        var j = 0.5 + i;
        c.moveTo(j, 0.5);
        c.lineTo(j, 19.5);
        c.stroke();
        c.moveTo(0.5, j);
        c.lineTo(19.5, j);
        c.stroke();
    }
    c.fillStyle = '#ffffff';
    c.fillText('{0}, {1}'.format(mouseX, mouseY), 0.5, 1.5);
}
render();
$canvas.mousemove(function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    render();
});

<canvas id="canvas" width="570" height="570"></canvas>