Acabo de empezar a jugar con el lienzo HTML5 y esperaba hacer un par de juegos con él. Sin embargo, tan pronto como comencé a mostrarle las coordenadas del mouse, se detuvo casi de golpe:

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

Todo lo que hice fue renderizar 38 líneas y algo de texto, debería poder manejar eso, ¿no?

¿Estoy haciendo algo mal? Me gustaría poder renderizar al menos a 30 FPS, pero para algo como esto espero que sea capaz de dibujar miles de veces.

¿O simplemente estoy usando la herramienta incorrecta para el trabajo? ¿WebGL está preparado para la tarea? ¿Por qué uno sería mucho más lento que el otro?

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>