Question

I am looking for a [fast] way to paint images from multiple canvases on the main canvas element.
What is the correct and the fastest way to do that?

Answer 1

The drawImage method of Canvas can accept as first argument a Canvas object. That’s the fastest and recommended way.

Here’s the extract from w3.org :

// drawing images

void drawImage((HTMLImageElement or
HTMLCanvasElement or HTMLVideoElement) image, double dx, double dy);

void drawImage((HTMLImageElement or HTMLCanvasElement or
HTMLVideoElement) image, double dx, double dy, double dw, double dh);

void drawImage((HTMLImageElement or HTMLCanvasElement or
HTMLVideoElement) image, double sx, double sy, double sw, double sh,
double dx, double dy, double dw, double dh);

Note that your canvas elements don’t have to be added to your document. I use in memory canvas for all my buffering or sprite objects (someSprite = document.createElement('canvas');...).