Annotate / draw on a HTML5 slideshow

Question

I'm using the HTML5 slideshow library reveal.js on OSX to teach programming.

What's still missing for me is a way to highlight something on a slide via simple drawings (e.g. encircle something).

Is there any way to do this (javascript or Mac app)?

PS: I tried a few run-of-the-mill apps which were very inconvenient to use during a presentation.

Thanks!

EDIT: maybe something in terms of using an overlay canvas?

Answer 1

There is nothing like this built into reveal.js but, as you suggest in the edit, it would be possible by overlaying a canvas element or SVG animation.

Personally I'd recommend not going for the hand drawn style and instead highlighting elements using standard CSS and fragments. Elements that are given the 'fragment' class will be stepped through by reveal.js, each fragment is given a 'visible' class when it should be highlighted.

Answer 2

I think DazzleSketch does what you're looking for: https://www.youtube.com/watch?v=N-ogf0ZDpj4