HTML5: Paint multiple canvases on one main canvas

canvas, html, html5-canvas

Solution

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');...`).

Problem

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?

Original source