To complement this experience I wanted to look at some vector-based web drawing tools. In the past this would have been with Flash, but I'm interested in new HTML capabilities. There's a very popular vector-based visualisation library called D3.js, and HTML is supposed to have an interface to using SVG (scalable vector graphics) built-in as well.
I suspected just accessing the SVG directly should be easier than using this unusual abstract interface - I mean I just want to specify some lines, how hard is that? Note the custom version of the DOM being used, and the sizes must be given in pixels.
In true w3c style, the SVG interface is a flaky, unreliable mess. It seems to be designed, really only considering that people would manually add "svg" tags directly into the HTML. This lets you do simple things like draw a circle, but is far to cumbersome for anything that you would actually want to draw. To do dynamic work we need a JS interface, for which the default SVG interface flat out does not work - it does't render anything.
To get anything to work you have to point to a custom spec on the w3c website, and use custom versions of the DOM (document object model) functions, post-fixed with "NS". At this point it's starting to look a lot like the design of OpenGL. After some time doing trial-and-error to establish that things truly weren't working as specified, I found a reliable way to work:
Interesting points to note:
I'm sorry, but no abstraction is worth using if it doesn't save you any time at all. SVG's interface is very badly designed. Once you get going with SVG you have a lot of sensible control over sizes and scales and so on. There are built-in functions for the usual lines and boxes. It's probably a good idea to compute your own canvas-relative factors to replace the pixel-exact sizes for bars and lines. In this case you could draw to any scale by refreshing the canvas when it's resized. It seems to have very nice anti-aliasing, which is a minor advantage of doing the same scaling thing with canvas 2d.
I'm not really impressed with 2d-canvas, SVG, or D3.js. None of them are great. WebGL at least uses the GPU (graphics processor unit). SVG and D3 are slow and have flaky interfaces. The manual scaling is just horrible. You can be very exact and produce sharper graphics with 2d canvas, that don't require any anti-aliasing, provided you know exactly the size of the canvas in advance. You can, of course, do 2d graphics with the 3d canvas, which would then also be hardware accelerated, and can access all sorts of interesting effects from that domain. Would I actually use these new tools? I'm not so sure - they have too many disadvantages to be good low-level APIs, and I find D3 just horrible - but I can see how it appeals to people who want to just modify a pre-built visual. C'mon people - it's not hard to manually make a sensible chart.