HTML 5 Disegno efficiente su tela per il gioco

Question

Sto tentando di sviluppare un gioco con l'elemento tela. In questo momento, sto disegnando piastrelle (quadrati colorati) come sfondo e l'eroe controllato da tasti freccia basati su questa demo: http://www.lostdecadegames.com/demos/simple_canvas_game/

Tuttavia, chiamare showdungeon () per disegnare il mio background rende il movimento dell'eroe non liscio come nella demo. Penso che il problema sia che sto disegnando ogni piastrella come 32x32, il che sta rallentando il movimento in cromo. Qualche suggerimento o ottimizzazione del codice che posso fare? Il movimento va bene quando le piastrelle sono 16x16, ma voglio le piastrelle 32x32. In un certo senso non voglio usare CSS per raddoppiare le dimensioni della tela in quanto ciò può rovinare la grafica con anti-aliasing. http://www.html5rocks.com/en/tutorials/casestudies/onslaught.html#toc-pixelated

// Draw everything
var render = function() {

   showDungeon();
    ctx.drawImage(img, hero.x, hero.y);

};

// The main game loop
var main = function() {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;
};

// Let's play this game!
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible

Problema non correlato: per qualche motivo, non sono riuscito a disegnare un quadrato verde come eroe in render (), quindi ho usato un'immagine.http://jsfiddle.net/4m5xz/4/