Ich habe gerade angefangen, mit der HTML5-Zeichenfläche zu spielen, und ich hatte gehofft, ein paar Spiele damit zu machen. Sobald ich jedoch mit dem Rendern der Mauskoordinaten begonnen hatte, kam es fast zum Stillstand:

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

Ich habe nur 38 Zeilen und etwas Text gerendert. Sollte das funktionieren, oder?

Mache ich etwas falsch? Ich möchte in der Lage sein, mindestens 30 FPS zu rendern, aber für so etwas würde ich erwarten, dass es in der Lage ist, 1000-mal zu zeichnen.

Oder verwende ich nur das falsche Werkzeug für den Job? Ist WebGL für die Aufgabe bereit? Warum sollte einer so viel langsamer sein als der andere?

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>