Presenting from a single canvas with HTML5

I’ve always been a fan of non-standard presentation techniques to help engage the audience. One that’s caught my eye recently is the idea of presenting from a single canvas, using a defined path but with the ability to digress. The two current offerings I know about for this technique are Prezi and JessyInk (see here and here for some comparisons between the two).

I figured that it would be nice to use some of the new features in HTML5/CSS3 to do this so you can just put together a standard HTML page (which is your 2D canvas – not to be confused with the new canvas element!) and have the traversing/zooming/rotating for free. This would also mean no need to require browser plug-ins (e.g. Flash for Prezi). SVG is a nice option but I’m guessing more people have standard HTML skills.

I’ve put together some code (called fivePrez for want of a better name), a rough attempt at doing some of this stuff. Unfortunately it currently only works on Firefox 4 which is still in beta. I haven’t even managed getting it working on Chrome because Webkit seems to do things differently (possibly positioning differences when you’ve scaled an element?). So if you have a version of Firefox 4 running, please try the demo. Otherwise, check out the video below. It’s not the best example but hopefully it gets the point across. Remember, the elements on the canvas are not moving/scaling/rotating into view, the canvas itself is moving so all the elements stay where they are in relation to each other.

Currently fivePrez works simply by including the fivePrez.js JavaScript file (and jQuery) and specifying (using JavaScript) a list of CSS selectors to define the path to traverse (e.g. fivePrez.setPath(['#element1', '#element2']);). Keyboard and mouse controls are option and work by including the appropriate keyboard/mouse script. The keyboard module allows you to traverse the path as follows (which should allow for using a remote clicker):

  • Right/Page Down: next
  • Left/Page Up: previous
  • Up: home (i.e. standard rendering for the page)

The mouse navigation allows you to double-click an element on the path to zoom straight to it.

I’ve also implemented a callback option to allow you to be notified when an item on the path is being moved to / away from as follows:

  function (viewId, viewSelector) {
    // View displayed
  function (viewId, viewSelector) {
    // View hidden

This is useful for e.g. starting/stopping video as I do in my example.

The code generally works by finding the element using the CSS selector provided in the path, determining the element’s current position, rotation etc and then performing a CSS transform on a parent container (generated by fivePrez) so all elements move with each other and the selected element is moved to the centre of the window and rotated appropriately.

Obviously this is very rough round the edges but interesting for a proof of concept. I might give it a go for my next speaking engagement if I’m confident it’ll do the trick. The main problems at present seem to be to do with editing rather than viewing; ideally it would at least have some user interface controls and the ability to drag around the canvas with the mouse.

Worth noting that Google have put together a nice example using HTML5 as a presentation technology to demonstrate the new standard (and Chrome of course).

4 thoughts on “Presenting from a single canvas with HTML5

    • Impressive, someone who’s done a much better job than I did! Hopefully they continue that work. Will be interesting to see how easy it is to create a new presentation given there’s no tooling.

Leave a Reply

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

You are commenting using your 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