Does Canvas Size Matter for Performance?

Question

While building a small game, a general performance related question about the Canvas API came up: I am clearing and drawing on only a small space of a large canvas. Does the large size of the canvas slow down performance in such a case or does only the amount of drawn pixels matter? E.g. is the entire canvas redrawn when something changes?

Answer 1

As a general rule of thumb, performance is effected by the resolution of the images you are drawing and the size of the canvas. But most devices have hardware to handle the drawing and can easily refresh the display they use with plenty of time spare for extra bling.

The biggest bottle neck is the interface between the Graphics hardware and the device's main memory. If all your graphics can fit into the device's GPU memory you will not have any real performance issues. But if you start drawing more images than can fit into the the graphics memory you will see a major performance drop as the device moves data in and out of graphics memory. There is no easy way to know what the memory capacity of a device is via javascript.

So in short its not the number of pixels that you draw that matter, it is the number of unique pixels/images you draw. The effect can be very dramatic, adding just 1K of extra pixels over the GPU capacity can more than half the frame rate even though you may actually be drawing less pixels in total.

Reducing the size of individual images helps the system manage resources. Rather than one large bitmap that may have to be swapped out to make room for just one small bitmap, cut the larger bitmap into smaller ones so the change over is quicker.

GPUs work in blocks of pixels 2, 4, 8, 16, 32, 64, 128, ... and on in powers of two for either width and height. It is much more efficient to use images of these sizes. Having a 130*130 pixel image may actually require 256*256 (or 256*196 depending on the type of GPU) pixels in memory to store on the GPU ram while reducing the image to 128*128 will fit neatly and not waist GPU RAM.

Don't reference patterns that you don't use, fonts, and SVG images also take up space in GPU memory that is related to their pixel size not their actual memory foot print. Don't leave the canvas state ready to draw a large font. You may have set it at the start and then don't intend to use it again, but while that font sits there ready to maybe drawn, it is using valuable RAM