¿Por qué putImageData es tan lento?

Question

Estoy trabajando con un lienzo relativamente grande donde se dibujan varias cosas (complejas). Luego quiero guardar el estado Canvas ', así puedo restablecerlo rápidamente al estado en que se encuentra ahora en un momento posterior. Yo uso getImageData para esto y almaceno los datos en una variable. Luego dibujo algunas cosas más en el lienzo y luego restableceré el lienzo en el lugar donde estaba cuando guardé su estado, usando putImageData.

Sin embargo, resulta que putImageData es muy lento. De hecho, es más lento que simplemente volver a dibujar todo el lienzo desde el principio, lo que implica varios DrawImage que cubre la mayor parte de la superficie y más de 40.000 operaciones lineTo seguidas de trazos y rellenos.

Redibujar el lienzo de aproximadamente 2000 x 5000 píxeles desde cero lleva ~ 170ms, usando putImageData, sin embargo, toma la friolera de 240ms. ¿Por qué putImageData es tan lento en comparación con volver a dibujar el lienzo, aunque redibujar el lienzo implica rellenar casi todo el lienzo con drawImage y volver a llenar aproximadamente el 50% del lienzo con polígonos utilizando lineTo, trazo y relleno. Así que, básicamente, cada píxel se toca al menos una vez cuando se vuelve a dibujar.

Porque drawImage parece ser mucho más rápido que putImageData (después de todo, la parte de drawImage de redibujar el lienzo lleva menos de 30 ms). Decidí intentar guardar el estado del lienzo sin usar getImageData, sino utilizar canvas.toDataURL y luego crear una imagen a partir de la URL de datos que me quedaría en drawImage para dibujarla en el lienzo. Resulta que todo este procedimiento es mucho más rápido y solo toma aproximadamente 35ms para completarse.

Entonces, ¿por qué putImageData es mucho más lento que las alternativas (usando getDataURL o simplemente redibujando)? ¿Cómo podría acelerar las cosas más? ¿Existe y si, en general, es la mejor forma de almacenar el estado de un lienzo?

(Todas las cifras se miden utilizando Firebug desde Firefox)

Answer 1

Sólo una pequeña actualización sobre cuál es la mejor forma es hacer esto. De hecho, escribí mi tesis de licenciatura en High Performance ECMAScript and HTML5 Canvas (pdf, alemán), así que reuní algo de experiencia en este tema por ahora. La mejor solución es utilizar múltiples elementos de lienzo. Dibujar de un lienzo sobre otro lienzo es tan rápido como dibujar una imagen arbitraria en un lienzo.Por lo tanto, "almacenar" el estado de un lienzo es tan rápido como restaurarlo más tarde cuando se usan dos elementos de lienzo.

This jsPerf testcase muestra los diferentes enfoques y sus ventajas y desventajas muy claramente.

simplemente para la corrección, aquí lo que realmente debe hacerlo:

// setup 
var buffer = document.createElement('canvas'); 
buffer.width = canvas.width; 
buffer.height = canvas.height; 


// save 
buffer.getContext('2d').drawImage(canvas, 0, 0); 

// restore 
canvas.getContext('2d').drawImage(buffer, 0, 0); 

Esta solución es, dependiendo del navegador, hasta 5000x más rápido que el de conseguir los upvotes.

Answer 2

En primer lugar decir que se está midiendo con Firebug. En realidad, descubro que Firebug ralentiza considerablemente la ejecución de JS, por lo que es posible que no obtenga buenos números para el rendimiento.

En cuanto a putImageData, sospecho que es porque las funciones requieren una gran matriz JS que contiene muchos objetos Number, todos los cuales tienen que comprobarse para el rango (0..255) y copiarse en un búfer de lienzo original.

Tal vez una vez que los tipos de ByteArray de WebGL estén disponibles, este tipo de cosas se pueden hacer más rápido.

Parece extraño que la decodificación y descompresión de base64 (con la URL de datos PNG) sea más rápida, pero que solo llame a una función JS con una cadena JS, por lo que utiliza principalmente códigos y tipos nativos.

Answer 3

En Firefox 3.6.8 Pude solucionar la lentitud de putImageData usando toDataUrl/drawImage en su lugar. Para mí que está funcionando lo suficientemente rápido que puedo llamar dentro de la manipulación de un evento MouseMove:

Para guardar:

savedImage = new Image() 
savedImage.src = canvas.toDataURL("image/png") 

El restaurar:

ctx = canvas.getContext('2d') 
ctx.drawImage(savedImage,0,0)