html5 - canvas element - Multiple layers

Question

Without any extension library  is it possible to have multiple layers in the same canvas element   So if I do a clearRect on the top layer  it will not erase the bottom one   Thanks

User · Answer

You might also checkout http   www concretejs com which is a modern  lightweight  Html5 canvas framework that enables hit detection  layering  and lots of other peripheral things   You can do things like this   var wrapper   new Concrete Wrapper     width  500    height  300    container  el      var layer1   new Concrete Layer    var layer2   new Concrete Layer     wrapper add layer1  add layer2       draw stuff layer1 sceneCanvas context fillStyle    red   layer1 sceneCanvas context fillRect 0  0  100  100       reorder layers layer1 moveUp        destroy a layer layer1 destroy

User · Answer

You can create multiple canvas elements without appending them into document  These will be your layers   Then do whatever you want with them and at the end just render their content in proper order at destination canvas using drawImage on context   Example      using canvas from DOM    var domCanvas   document getElementById  some-canvas    var domContext   domCanvas getContext  2d    domContext fillRect 50 50 150 50       virtual canvase 1 - not appended to the DOM    var canvas   document createElement  canvas    var ctx   canvas getContext  2d    ctx fillStyle    blue   ctx fillRect 50 50 150 150       virtual canvase 2 - not appended to the DOM        var canvas2   document createElement  canvas   var ctx2   canvas2 getContext  2d    ctx2 fillStyle    yellow   ctx2 fillRect 50 50 100 50      render virtual canvases on DOM canvas    domContext drawImage canvas  0  0  200  200   domContext drawImage canvas2  0  0  200  200     And here is some codepen  https   codepen io anon pen mQWMMW

User · Answer

No  however  you could layer multiple  lt canvas gt  elements on top of each other and accomplish something similar    lt div style  position  relative   gt    lt canvas id  layer1  width  100  height  100      style  position  absolute  left  0  top  0  z-index  0   gt  lt  canvas gt    lt canvas id  layer2  width  100  height  100      style  position  absolute  left  0  top  0  z-index  1   gt  lt  canvas gt   lt  div gt    Draw your first layer on the layer1 canvas  and the second layer on the layer2 canvas   Then when you clearRect on the top layer  whatever s on the lower canvas will show through

User · Answer

I understand that the Q does not want to use a library  but I will offer this for others coming from Google searches   EricRowell mentioned a good plugin  but  there is also another plugin you can try  html2canvas   In our case we are using layered transparent PNG s with z-index as a  product builder  widget  Html2canvas worked brilliantly to boil the stack down without pushing images  nor using complexities  workarounds  and the  non-responsive  canvas itself  We were not able to do this smoothly sane with the vanilla canvas JS   First use z-index on absolute divs to generate layered content within a  relative positioned wrapper  Then pipe the wrapper through html2canvas to get a rendered canvas  which you may leave as-is  or output as an image so that a client may save it

User · Answer

I was having this same problem too  I while multiple canvas elements with position absolute does the job  if you want to save the output into an image  that s not going to work   So I went ahead and did a simple layering  system  to code as if each layer had its own code  but it all gets rendered into the same element   https   github com federicojacobi layeredCanvas  I intend to add extra capabilities  but for now it will do   You can do multiple functions and call them in order to  fake  layers

User · Answer

but layer 02  will cover all drawings in layer 01  I used this to show drawing in both layers  use  background-color  transparent   in style    x000D   x000D       lt div style  position  relative   gt   x000D         lt canvas id  lay01  width  500  height  500  style  position  absolute  left  0  top  0  z-index  0  background-color  transparent   gt  x000D         lt  canvas gt   x000D         lt canvas id  lay02  width  500  height  500  style  position  absolute  left  0  top  0  z-index  1  background-color  transparent   gt  x000D         lt  canvas gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Related to this   If you have something on your canvas and you want to draw something at the back of it - you can do it by changing the context globalCompositeOperation setting to  destination-over  - and then return it to  source-over  when you re done    x000D   x000D     var context   document getElementById  cvs   getContext  2d    x000D   x000D         Draw a red square x000D      context fillStyle    red   x000D      context fillRect 50 50 100 100   x000D   x000D   x000D   x000D         Change the globalCompositeOperation to destination-over so that anything x000D         that is drawn on to the canvas from this point on is drawn at the back x000D         of what s already on the canvas x000D      context globalCompositeOperation    destination-over   x000D   x000D   x000D   x000D         Draw a big yellow rectangle x000D      context fillStyle    yellow   x000D      context fillRect 0 0 600 250   x000D   x000D   x000D         Now return the globalCompositeOperation to source-over and draw a x000D         blue rectangle x000D      context globalCompositeOperation    source-over   x000D   x000D         Draw a blue rectangle x000D      context fillStyle    blue   x000D      context fillRect 75 75 100 100   x000D   lt canvas id  cvs    gt  x000D   x000D   x000D

[html] html5 - canvas element - Multiple layers

Examples related to html

Examples related to canvas

Examples related to layer