reveal.js presentation. This can be used
during a live or screen-recorded a lecture using a tool like
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.
- ctrl-` (next to the 1) erase and turn off drawing
- ctrl-1 Yellow Pen
- ctrl-2 Green Pen
- ctrl-3 Cyan Pen
- ctrl-4 Red Pen
- ctrl-5 White Pen
- ctrl-6 Blue Pen
- ctrl-7 Magenta Pen
- ctrl-8 Black Pen
- ctrl-- Make pen narrower
- ctrl-= Make pen wider
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"> <body> <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> </body> </html>
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.