html5 – canvas element – Multiple layers

by

No, however, you could layer multiple <canvas> elements on top of each other and accomplish something similar.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

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.

More Related Contents:

  1. HTML5 Canvas Rotate Image
  2. Html5 canvas drawImage: how to apply antialiasing
  3. How can I convert an HTML element to a canvas element?
  4. Drawing text to with @font-face does not work at the first time
  5. How to draw a rounded rectangle using HTML Canvas?
  6. What’s the best way to set a single pixel in an HTML5 canvas?
  7. How to change the opacity (alpha, transparency) of an element in a canvas element?
  8. How do I make a transparent canvas in html5?
  9. using HTML5 Canvas – rotate image about arbitrary point
  10. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  11. Can you take a “screenshot” of the page using Canvas?
  12. HTML5 Canvas getImageData and Same Origin Policy
  13. How can I write text on a HTML5 canvas element?
  14. Animated GIF in HTML5 canvas
  15. Chart.js canvas resize
  16. Drawing a dot on HTML5 canvas [duplicate]
  17. HTML5 Canvas background image
  18. Placing a within a
  19. Combining two or more Canvas elements with some sort of blending
  20. All html canvas shapes are given the color of the last object added
  21. What is the difference between SVG and HTML5 Canvas?
  22. Subpixel anti-aliased text on HTML5’s canvas element
  23. Draw SVG on HTML5 Canvas with support for font element
  24. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  25. How put percentage width into html canvas (no css)
  26. HTML5 Canvas and Line Width
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment