HTML5 canvas drawImage function slow when source and destination canvases are same?

Question

I noticed that the drawImage function is 1000+ times slower when both source and destination canvases are the same. Why is this ? What canvases go to the GPU and what don't ? Any help on this topic would be very much appreciated.

Thanks !

Answer 1

When you use the canvas as both source and destination, the browser is required to do (there are finer steps involved, but these are the main ones):

• Create a scratch bitmap to copy to
• Copy current bitmap into scratch bitmap
• Copy scratch bitmap back to original bitmap at a different position (ie. drawImage(canvas,...));
• Remove scratch

This instead of when you use separate canvases:

• Copy source bitmap to destination bitmap

Why not just "blitting"? The official standard define this case in this way (my emphasis):

When a canvas or CanvasRenderingContext2D object is drawn onto itself, the drawing model requires the source to be copied before the image is drawn, so it is possible to copy parts of a canvas or scratch bitmap onto overlapping parts of itself.

Also take a look at the Drawing Model for the steps involved.