Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /share/CACHEDEV1_DATA/Web/www/libraries/UBBcode/text_parser.class.php on line 228
HTML5: Multilayer Canvas elements

Comments Blog About Development Research Sites

HTML5
Multilayer Canvas elements

Jun 29, 2010
One of the great new features to be introduced with HTML5 is the canvas element. While already present in most modern browsers in some form or another this great tool (more specifically its 2D drawing context) allows for easy manipulation of visual data. This includes the ability to transform the shape and colors of images, as well as drawing shapes and lines using nothing more than some javascript.

It is therefore a mystery to me why every geek and his mother seem to take this as a sign to create MS Paint simulators. I probably missed the memo about that being the 'hello world' of the canvas element apparently.

Of course, there is a lot more possible with this element, or at least, certain things have been made a lot easier with it. To illustrate, consider this screenshot of project Holmgard:



What you see here is not one canvas element, but three: a 'ground' layer for scenery (created by combining a great many image tiles), a 'unit' layer, used to display units and their selection markers (note the green square surrounding the footman on the right) and an 'interface' layer used to display visual interface elements such as the selection box being drawn. These layers are placed on top of eachother using the following CSS:
Code (php) (nieuw venster):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
canvas {
  position:             absolute;
  top:                  0px;
  left:                 0px;
}


#groundCanvas {
  z-index:              0;
}


#unitCanvas {
  z-index:              1;
}


#interfaceCanvas {
  z-index:              2;
}

Each canvas element has a specific z-index and is positioned at the same absolute location in the containing div. The advantage of this is that modifying an element in one layer does not affect elements in the other. Drawing the selection box (which requires redrawing the selection square every time the mouse is moved) for instance is done very frequently when selecting - updating the background on the other hand is almost never required. Thus, by seperating these in layers we only need to repaint the selection box, not the background or units!

What is more, this is a very natural and easy way to place the selection square on top of the units that are being selected: otherwise we would have to make sure the units are drawn first and only then update the selection square to make sure units would not appear to stand 'on top' of the selection square.

Of course, there is a cost in memory usage, but a few meg's are not going to hurt anyone, while slower browsers (such as Chrome - it does not use hardware acceleration by default, making it considerably slower than Firefox and IE9) can benefit greatly from reduced CPU usage.

FragFrog out!

Jul 5, 2010 Juho Vepsalainen

Yeah. "Paint" does indeed seem to be the "hello world" of Canvas. I'm actually writing a painting app myself (dev gallery, http://picasaweb.google.fi/bebraw/Harmony . programmer art :P) and came by this blog as I'm investigating overlays currently. z-index seems to be the smartest way to go.

It's a bit surprising there's no native support for layers in the Canvas element. Sometimes the API feel really low level. I suppose given enough time wrappers that hide the ugly details will come up.

Is project Holmgard publicly available somewhere? Google didn't return any proper results.

Btw your blog gives a db error if a name contains scandic characters.

Jul 5, 2010 Matthijs

Don't tell anyone, but the code behind this blog is about 7 years old - my own personal 'hello world' at PHP programming so to speak =] I'll update it soonish.

A feature I'm starting to miss more now is an easy way to clear an entire canvas. There is clearRect, but this is quite slow - it takes Chrome about 100ms to clear a 1024x1024 canvas area here. Alternatively the canvas.restore() option would be a fair candidate to also undo the last drawing action in my opinion, alas it is not so. I would definitely vote for a simple undo command, manually implementing it is probably much slower.

Project Holmgard is more or less publicly available at http://holmgard.fragfrog.nl/, but it requires the latest Chrome dev build or latest Firefox nightly (which finally included WebSocket support last week) and is still very much a work in progress.

Jul 12, 2010 TheRookie

Doesn't work with latest chrome dev build (6.0.458.1) ???

Jul 13, 2010 Matthijs

Peculiar, it works with 6.0.458.1 dev here. There are a few corrupt (old style) websocket requests in the logs, though that build should send the new ones. Will have a look :)

New comment

Your name:
Comment: