A JavaScript library that allows one to sketch over reveal.js presentations or any web page

Download as .zip Download as .tar.gz View on GitHub

DazzleSketch - OmniDazzle meets JavaScript

A JavaScript library that allows one to sketch over a web page or reveal.js presentation. This can be used during a live or screen-recorded a lecture using a tool like Camtasia.

Here is an introductory video and an example of DazzleSketch used with reveal.js from my Introduction to Networking book.

This page already has DazzleSketch loaded so you can scribble on this page using the following keystrokes and your mouse. DazzleSketch has no UI other than the scribbling so all your viewers see is what is on your screen and what you are drawing.

While you are scribbling most mouse movements will be taken over by DazzleSketch. If you hover over a link, the a:hover action will not happen and you might not be able to click on a link in the HTML document until you clear the sketch overlay with ctrl-`. This is because DazzleSketch makes an HTML5 canvas that covers the entire window area and uses z-index to be "on top" of the other HTML content on the page. When you clear the screen, the DazzleSketch canvas is placed behind the rest of the content using z-index so all the normal mouse movements apply to the web content.

For me, I have a Wacom Cintiq 12WX 12-Inch Pen Display that I remap the keys to make the drawing very smooth for nice drawings while recording lectures for my online classes.

DazzleSketch builds on the excellent sketch.js library that implements a simple sketching tool using jQuery and the HTML5 canvas:

sketch.js (formerly http://intridea.github.io/sketch.js/

I mimic the UI and keystrokes of the OmniDazzle drawing tool that worked so well but was not compatible with MacOS versions beyond 10.8 :(. You add DazzleSketch to a web page using the following pattern:

<html lang="en">
    <h1>This is a Header</h1>
    <p>This is a paragraph that we will scribble on.</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="sketch.js"></script>
    <script src="dazzleSketch.js"></script>

This also works well when added to the reveal.js HTML. I would like to see it turned into a plugin for reveal.js - but I am sure it needs a bit of code review.

I also built a sample of scribling over a Google Presentation using an iframe. Make sure to scroll down to the bottom and read the notes about how Google grabs keystrokes.