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:


Canvas Tag Clipping 2

Continuing on from the last post, I’ve made some improvements to the Javascript UI skeleton:

Try clicking on and dragging the rectangles around and see what happens. Unless you’re using IE, of course, in which case I suggest you go and download a web browser first.

I read up on the canvas API and it transpired that the canvas element already includes clipping functionality. I ripped out my own clipping routines and used the rectangles calculated by the BSP routine to define the clipping regions for the built-in drawing functions. (As an aside, I’m seriously considering pulling the Graphics class out of Woopsi and using the GraphicsPort everywhere, so that clipping is available when drawing to bitmaps. This would require a few changes to the way the clipping region is specified, but I think it would be a change for the better.)

I’ve also improved the way gadgets recalculate their clipping regions when they are moved. Instead of recalculating the entire BSP tree, the system just recalculates the tree nodes within the space defined by the moved gadget’s parent. Since those nodes are the only nodes that can possibly have changed, there’s no reason to recalculate everything.

Gadgets are limited to the confines of their parents. This makes it impossible for them to overlap their parents’ borders. In Woopsi this border protection was aided by the alternative display partitioning scheme; the BSP system used here does not make it quite so easy.

Finally, gadgets jump to the front of the stack when clicked. However, this has been disabled so that it’s possible to move a gadget behind another and actually prove that there’s a reason not to just opt for the painter algorithm instead of this BSP stuff.