HTML5: draw multiple canvases on one main canvas

Question

I am looking for a [quick] way to draw images from multiple canvases on the main canvas element. What is the right and fastest way to do this?

Answer 1

The Canvas method in drawImage can accept a Canvas object as its first argument. This is the fastest and recommended way.

Here is an excerpt from w3.org :

// draw images

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

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

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

Please note that elements of your canvas should not be added to your document. I use in memory canvas for all buffering objects or sprites ( someSprite = document.createElement('canvas');... ).

Answer 2

Dystroy is right, if you want to save canvas paintings, you can use getCanvasData.