CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Dani
Dani

Reputation: 1250

Layering Canvas elements

I'm working on a pototype HMTL5 canvas animation that will export to quicktime.

I'm having a dynamically generated background with dynamically masked elements on top of it.

I can get the background to be made, and have it export to the server as a frame by frame animation (png sequence) and then compile the animation using FFMPEG into a quicktime. The concept is working.

However, whenever I try to put the dynamically masked elements on top of the background, the background gets affected by the mask too.

Currently the draw opperation I have goes

  1. Draw Background element 1
  2. Draw Background element 2
  3. Draw Foreground Element Mask
  4. Switch to Source-in Mode
  5. Draw Foreground element fill
  6. Revert to Source-Over Mode

I'm obviously using the source mode wrong, but I'm not sure it is possible to do what I want (have a mask affect the element right under it, but not ones below that).

The easiest solution I can think of would be to just layer 2 canvas objects on top of eachother...however I'm not sure how I could combine the 2 canvases into a single image for the quicktime export.

Thanks for the help

Upvotes: 0

Views: 47

Answers (1)

markE
markE

Reputation: 105035

The context.drawImage method will accept another canvas as the image source.

So if you want to "flatten" all your canvases into a single canvas:

yourMainContext.drawImage(yourOverlayCanvasElement,0,0);

Upvotes: 1

Related Questions