CODEWITHSUNDEEP
javascriptperformancehtmlhtml5-canvas
Ivan Kochurkin
Ivan Kochurkin

Reputation: 4481

Drawing image to newly created canvas or to a canvas in the buffer

What should I use: drawing to newly created canvas document.createElement("canvas") or drawing to a canvas from buffer with pre-initialized canvas elements? What is the best way to achieve max performance and min memory consumption? Is there a noticeable difference between these two methods? Will garbarage collector remove all temporary canvases, which has been created with document.createElement("canvas")?

Upvotes: 0

Views: 130

Answers (1)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83788

There is no difference performance how regarding <canvas> element is created (Javascript, HTML).

There is a cost associated with the creation of <canvas> element regardless how you do it, so you don't want to create many of them in your draw loop. This cost is browser specific, depends on implementation, but it may be high. Also it might depend on whether you just create the element or drawn on it for the first time.

For actual drawing operation performance it may matter if canvas is on the screen or off screen (back buffer). Also accessing pixel data directly (get data, put data) has a cost associated it because you may need to download the back buffer from GPU RAM to CPU RAM first.

Upvotes: 1

Related Questions