Not So Much Renaissance Man More Tool-Using Ape :-)

(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”.[1]

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. [2]

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.[3]

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.

With canvas you use javascript to create diagrams. [4]

While many of you probably don’t know javascript a lot of people do and it’s a fine, readily learnable, language. It’s certainly fit for the purpose of manipulating character strings and driving diagram creation. [5]

Today I actually create the HTML and javascript using PHP – which is good for most things, especially parsing XML and HTML and string manipulation.

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?[6]

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. [7]

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. [8] This PNG can be copied or saved in a file.

Three snags:

  1. It would be better workflow if Firefox allowed you to Copy or Save the graphic without having to View Image first.

  2. When I last checked neither Mobile Safari nor Chrome have the same workflow.

  3. 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 [9] and with the scale in hours and minutes

And I’ll confess it’s been fun. πŸ™‚


  1. There are plenty of other reasons for liking web technologies, of course.  ↩

  2. One day we might hire a graphics designer – but finding one who knows GDDM is going to be tough.  ↩

  3. Albeit in REXX, probably.  ↩

  4. There are plenty of HTML5 Canvas tutorials on the web; None strikes me as overwhelmingly better than the rest.  ↩

  5. Learn it anyway; As a useful programming language in its own right.  ↩

  6. When people say something is “too clever by half” I think they really mean it’s “insufficiently clever by half”.  ↩

  7. I actually use this in my machine diagram and have to use a kind of polyfill for when I’m running in an older version of Firefox.  ↩

  8. Using a Data URI.  ↩

  9. 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.  ↩

Published by Martin Packer

.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: