A JavaScript library that allows one to sketch over reveal.js presentations or any web page - OmniDazzle meets JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
dazzleSketch.js
google.html
sample.html

README.md

DazzleSketch - OmniDazzle meets JavaScript

A JavaScript library that allows one to sketch over a web page or reveal.js presentation. Quite useful when using reveal.js to give a live lecture or when you are using reveal.js to record a lecture using a tool like Camtasia.

This is a bit of code that builds on the excellent sketch.js library that implements a simple sketching tool using jQuery and the HTML5 canvas:

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="http://intridea.github.io/sketch.js/lib/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.

When DazzleSketch is loaded, you see no UI on the screen - it is just ready to scribble and activated using the following keystrokes.

  • ctrl-` (next to the 1) erase and turn off drawing
  • ctrl-P Switch between a white canvas and transparent canvas
  • 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.

If you are using DazzleSketch in a Reveal.js persentation, each time you switch slides, the drawing canvas is cleared and set to transparent.

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.