Canvas Frustration

I have no idea why the idiots at the WhatWG thought canvas was useful without the ability to draw text (without the gross hacks like overlaying absolutely positioned divs) or doing dashed/dotted lines, but they’ve just made for a very frustrating evening of coding.

For the record, I’m trying to draw graphs, which is the most obvious use of canvas in a Wiki context.

There are two base requirements for drawing graphs with any sort of graphics engine:

  • You can’t draw graphs without labeling them (otherwise the exercise is rather pointless)
  • You need different line styles, period.

Relying on color alone to discern between different kinds of edges is a major usability no-no (and I’m not even going to mention printing – I suppose Web standards weenies don’t print anything). Plus createPattern does not help.

So I need proper text rendering (although there are some brilliant non-localizable approaches out there) and line styles beyond thickness.

I have a feeling I’d have been far more productive using Flash (been there, done that, and I can paste most of my canvas code straight into ActionScript) or (brrr) Silverlight.

And no, before you ask, SVG isn’t really an option right now.

So, what are the cool kids using these days for drawing dashed and dotted lines?

Update: Okay, besides more suggestions for SVG (which, again, isn’t an option for me right now), here are some interesting tidbits that let me use canvas and keep the drawing logic a client-side affair:

  • Philip Taylor suggested drawing dashed lines procedurally, and pointed me to a nice sample. I will probably do something based on it.
  • Taras Glek pointed me to this post and this sample (use Camino, if you have it) which is very nice indeed, and something to go back to if I ever need a traditional tree graph.

Thanks to everyone who wrote in.

See Also: