Canvas.alpha = 0.5 assed;

Now that the backlog is cleared (unplugged?) I can whine about javascript’s canvas.

I’m trying to make a point about getting back to some technical projects (really a whole ‘nother topic, but I’ve written enough already) The current lottery winner is developing a multi-level disk clock for OS X Dashboard.

I think my superpower is always doing the hard things first. Ruby on Rails is a toolkit for making online databases. It makes certain operations easy by generating much of the boilerplate for you (and hiding the rest with higher level abstractions) In any case two of my first goals were not boilerplate – updating multiple fields in a subset of records, and importing a spreadsheet.

Back to widgets. Widgets are built like miniature web pages, using HTML, CSS, and JavaScript/ECMAscript. They use an element called canvas, initially only in Safari and slowly expanding to others (still nothing from IE, but there are a few hacks out there.) Canvas allows 2d drawing with a PostScript style rendering model I’m sure derives form Quartz (Of course, this annoys the heck out of me because I’d much rather be using PostScript for much of it)

Anyway, you can do a couple of things with a canvas:

-draw an image, with transparency
-rotate, scale, etc.
-have the canvas appear transparently over the backdrop.
-use a canvas in place of an image
-use a canvas or image as a fill pattern

Unfortunately, these features are implemented haphazardly. While both image and canvas can be transparent, canvas isn’t transparent when being used as an image. (And the should-be-transparent sections show random garbage.) While you can use a canvas as a fill pattern – and transparency works in this case – nothing is draw if your rotate the context even the slightest bit.

I wanted to dynamically construct disks – mark the light/dark periods on the day disk, perhaps putting the varying day numbers on the month disk, etc. Unfortunately, there doesn’t seem to be a good way to cache the images.

Actually, I could probably do it with a clipping path to trim the random garbage. Whether that’s any more efficient would depend on how complex the cached rendering was.

Posted Saturday, December 22nd, 2007 under Devlog.

Comments are closed.