Performance: Html5 Canvas / Javascript - Moving the background image using canvas.drawImage vs canvas.style

Question

I have a background that scrolls up, down, left and right based on position, and was wondering if there is any significant performance difference into using drawImage() every time the position changes vs just drawing the entire background once and moving the canvas around using canvas.style

Using canvas.drawImage()

//cut piece and draw image to fill canvas every time position changes
canvas.drawImage(backgroundImg, 0 + positionX, 0 + positionY, c.width, c.height, 0, 0, c.width, c.height);

VS

Using canvas.style

canvas.width  = widthofbackgroundImg;
canvas.height = heightofbackgroundImg;

//draw entire background only once
canvas.drawImage(backgroundImg, 0, 0, widthofbackgroundImg, heightofbackgroundImg);

..then

//move the entire canvas on every position change
canvas.style.left = positionX;
canvas.style.up   = positionY;

Matthi · Accepted Answer · 2020-12-07 07:45:32Z

1

Those are two different approaches which are depending on the browser processing (different browsers might set different priorities in rendering). For sure, it does not make sense to move the canvas image by drawImage, if nothing else changes and there is just an initial draw. Instead of going with canvas.style.left and canvas.style.right I would suggest you to use transform = translate3d(x, y, 0) and test the performance improvement with your dev tools. This will be rendered via the GPU and may increase speed. It will prevent reflow which is time consuming in general. Also the reading from and writing to the DOM in alternation might slow down performance. It will help to first make all reading (get positions, scroll position or the like), save it in variables and then write everything.

edited Dec 7, 2020 at 7:45

answered Dec 7, 2020 at 7:37

Matthi

1,0738 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vardan Betikyan Over a year ago

Interesting.. I will give it a try. If I see a performance boost I will accept your answer

Collectives™ on Stack Overflow

Performance: Html5 Canvas / Javascript - Moving the background image using canvas.drawImage vs canvas.style

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related