CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasdrawimage
Mostafa Ali
Mostafa Ali

Reputation: 196

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

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 !

Upvotes: 1

Views: 195

Answers (1)

user1693593
user1693593

Reputation:

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.

Upvotes: 2

Related Questions