CanvasLayers - A Layer Library for the HTML5 Canvas Tag

Wouldn’t it be neat if the canvas tag supported layers? Now it does!

This uses the layering engine from CanvasUI, modified to support transparency and transparent sections (if required). Unlike other layer libraries for javascript, this uses a single canvas rather than a stack of several. Something this library gives you that a stack of canvases can’t is nested layers.

I changed the CanvasUI library so that it uses the latest Woopsi layout technique (damaged rects) instead of the old method (BSP trees). It doesn’t appear to have had any impact on performance, but it does make the code simpler. The new CanvasLayers library uses the latest version of the CanvasUI as its basis. I’m hoping to strip the duplicate functionality out of CanvasUI and use the CanvasLayers library as the canvas engine.

The CanvasLayers library sourcecode can be downloaded from BitBucket:


Richard on 2010-11-30 at 19:57 said:

It’s bitbucket.org :-)

Ant on 2010-11-30 at 22:28 said:

Ooops! Thanks!

Kendall on 2012-12-01 at 16:15 said:

How does this work if you want to load dynamic images and paint strokes under it

Ant on 2012-12-03 at 16:32 said:

@Kendall: Take a look at the reply to your other comment.