CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Erik Sapir
Erik Sapir

Reputation: 24767

HTML5: Paint multiple canvases on one main canvas

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?

Upvotes: 4

Views: 411

Answers (2)

Aakash
Aakash

Reputation: 1900

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

Upvotes: 0

Denys Séguret
Denys Séguret

Reputation: 382464

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

Upvotes: 3

Related Questions