Cuál es la forma más rápida de mover una región rectangular (píxel) dentro de un elemento de lienzo HTML5

Question

Deseo implementar el desplazamiento vertical de los contenidos de un elemento canvas de HTML5. No quiero volver a mostrar todo el contenido. En cambio, me gustaría mover todo el contenido hacia abajo/arriba y solo mostrar el área, que se ha desplazado a la vista.

Experimenté con las funciones getImageData y putImageData pero en mis pruebas son casi tan lentas como repintar toda la escena.

// scroll 20px down 
var data = ctx.getImageData(0, 0, width, height-20); 
ctx.putImageData(0, 20); 

¿Cuál es la forma más rápida de copiar regiones de píxeles rectangulares dentro de un elemento de lienzo?

Answer 1

Prueba esto:

ctx.drawImage(ctx.canvas, 0, 0, width, height-20, 0, 20, width, height-20); 

drawImage puede tomar ya sea un HTMLImageElement, un HTMLCanvasElement, o un HTMLVideoElement para el primer argumento.

Answer 2

Para la velocidad absoluta, me gustaría utilizar una de gran tamaño <canvas> dentro de un <div> con overflow:hidden establecer a continuación, utilizar métodos DOM regulares para desplazarse por la <canvas> dentro de la <div>.

Por supuesto, esto sacrifica el uso de la memoria a favor de la velocidad.