Layers on Canvas

TLDR;

Can’t be done natively, use this instead: layeredCanvas

 

HTML5 Canvas doesn’t implement a layers mechanism. In order to implement this you can do it in 2 different ways:

Multiple canvas elements approach

Think of a layer as an individual canvas and then absolute position one on top of the other. Then to lay it out just wrap on a div with position relative:

What’s crappy about this is if you want to save the image you have to do a screenshot and then cut it, or you can only save one canvas element at a time.

Single canvas element approach

Natively, there is no way of doing this, but with a little bit of abstraction, it isn’t a problem. Think of a layer as a function, now you call the functions in order and you are mostly layered:

This is still a bit crappy … lets make it slight more layer-like. We can make an array of functions and run them in sequence. This is much better because now we can remove (or change the index) an element from the array effectively replicating a layer feel:

DONE! Not too bad … using this principle I created a more elegant approach that allows you a couple more neat little things like show/hide … try it, fork it, use it: layeredCanvas

Leave a Reply

Your email address will not be published. Required fields are marked *