(Originally posted 2014-11-02.)
If you come to my blog only for Performance- or SMF-related topics you’re going to be disappointed in this post. But if, like me, you’re interested in storytelling and web-related technologies then read on.
This post is about HTML5 Canvas – a technology I really like.
Some Of Why I Care About Web Technologies
To try and keep this focused I’m going to talk only about why web technologies are relevant to my “day job”.
The tooling I curate and use was built over many years by many people. Its graphics are built on GDDM, and look like they date from the 1970s. But I’m not so concerned about how they look, so long as they tell the story well. 
But there are some stories that require some new methods of depiction, some new diagram types. Perhaps the ones in WLM Velocity – Another Fine Rhetorical Device I’ve Gotten Myself Into are a poor example of that. I don’t think I’ve shown you machine diagrams yet, but plenty of customers this year have seen them. And they’re a much better example of stuff that would require some quite low level GDDM programming.
So I adopted a new approach, one that already yields nicer graphics than (I think) I could do with GDDM.
Step Forward HTML5 Canvas
Web standards, and HTML5 in particular, are slowly evolving. One of the most stable pieces is the “new” <canvas> tag. And it’s the one I find most immediately useful.
To use all this you need a modern web browser, of which more anon.
Note: You can build sophisticated, 3D, diagrams using WebGL. WebGL can use Canvas. But today I don’t use WebGL – but I have a book on it so one day I might.
Insufficiently Clever By Half?
HTML5 Canvas is supported by most “modern” web browsers. You could say any browser unable to support Canvas is not a modern browser. But the degree of support varies by browser, and between browser releases. My recent experiences with Firefox Nightly shows it supports some drawing capabilities previous releases don’t – such as dashed lines. 
Support for drawing capabilities is one thing; Another is behaviour in the browser:
In Firefox right-clicking on a canvas element brings up a menu with a “View Image” item. This displays the graphic as a PNG.  This PNG can be copied or saved in a file.
It would be better workflow if Firefox allowed you to Copy or Save the graphic without having to View Image first.
When I last checked neither Mobile Safari nor Chrome have the same workflow.
Dragging the graphic into Symphony seems to cause the latter to loop. (And you can’t drag from the page with the canvas in.)
A glance at the spec suggests it doesn’t address how a browser should behave with the canvas element. I’m not saying it should but, and this is perhaps my conclusion, it would be really nice to see browsers competing with each other on how they handle canvas.
As it’s an open-source browser I’d quite like to fix it for Firefox, but I simply don’t have the time. 😦
But for now, it’s really satisfying to be able to generate diagrams this way that (to my eyes at least) look decent. And so far I have:
- Machine diagrams
- WLM depictions
- Gantt charts – in colour  and with the scale in hours and minutes
And I’ll confess it’s been fun. 🙂
There are plenty of other reasons for liking web technologies, of course. ↩
One day we might hire a graphics designer – but finding one who knows GDDM is going to be tough. ↩
Albeit in REXX, probably. ↩
There are plenty of HTML5 Canvas tutorials on the web; None strikes me as overwhelmingly better than the rest. ↩
Learn it anyway; As a useful programming language in its own right. ↩
When people say something is “too clever by half” I think they really mean it’s “insufficiently clever by half”. ↩
This is something I haven’t been able to do before – colour – and I’m only just beginning to think of uses for colour coding in Gantt charts. ↩