Canvas UI Update

It’s been a long time since I worked on my GUI library for the HTML5 canvas tag. Here’s what it looked like last time I linked to it:

Here’s what it looks like now:

New features include:

  • A working text box gadget (click in the box labelled “text” and type something);
  • Scrollbars;
  • Labels;
  • Gradients;
  • Key up/down/press event handling;
  • Closures instead of objects as event listeners;
  • Focus representation via blue outlines.

There are a bunch of other bug fixes and changes in there, too. Get the source from the BitBucket page.


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

How does this work with drawing strokes or images on separate layers?

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

There’s an example of loading an image here:


For instructions on how to draw to the different layers, refer to the tutorial in the BitBucket wiki: