Chris’ thoughts on HTML5 Canvas, SignalR and Git

Chris Griggs

HTML5, SignalR and Git logosHTML5 Canvas

HTML5 canvas is a powerful little container for graphics which I only used the smallest set of features of. Other features to explore would be changing of line colours/styles, and of drawing shapes. There are also other algorithms for drawing lines (Bezier/Quadratic) that might lead to smoother lines. Problems arose due to different implementations between web-browsers; chrome seemed to fare the worst here, especially when reporting the position of events. Some of the other features of HTML5/CSS3 I used were only available in the latest versions of browsers and work-arounds would need to be found to allow more universal coverage.

The JavaScript used to create canvases was quite simple so didn't cause many headaches; most of the work went into working out which CSS properties to use, especially considering the odd transformations Reveal applies to slides. I found Firebug very useful for inspecting the code used to create various element and for debugging JavaScript, although Firefox's and Chrome's built in developer tools offered most of what I needed.

To do the annotation itself pointer events made life a lot simpler than the original process of defining different events for each input type, I would certainly go down this route again especially since there's a polyfill available to use them in older browsers.

UI Effects

I also looked at some uses of pure HTML/CSS to replace things often scripted; showing and hiding menus for example. Once established I think this will be a nicer way of doing things. Given more time I would have liked to look more into animations and other effects.


SignalR made sending annotations to different screens easy. Although because of our implementation of communications classes in Angular a nasty hack was needed to send annotations to this via events. Starting again I would have attempted to do the drawing and receiving of pointer events using Angular itself.


I found Git was not obvious in its use to start with but by the end of the week I had a workflow sorted. Stash Save / Pull / Stash Pop / Merge / Push. This might not have been the recommended route, but worked for me. I still prefer Mecurial to both this and SVN.

Leave a Reply