Would it be more efficient to use drawImage to draw multiple images, or use a WebGL equivalent?

Viewed 41

Displaying around 30 images on the canvas every 60fps, for a game. (Either redrawing the same images, or deleting those and drawing new ones.) Which one would be more performant?

Any more in depth explenation on how either get and display an image on the canvas and what the difference is? As far as I know WebGL loads images into textures, but I am not sure how drawImage does it.

JS drawImage, or recreating it in WebGL.

1 Answers

drawImage is using CPU to draw pixel by pixel onto canvas. WebGL is using GPU to "place" image onto canvas.

As you mentioned 60fps I assume using power of GPU will be better to get speed you need.

It will also depends on type of image, as GPU has some limits as VRAM size, max image resolution (mostly 4096x4096).

Related