Skip to content

Instantly share code, notes, and snippets.

@stuart-warren
stuart-warren / README.md
Last active September 2, 2021 14:42 — forked from nitaku/README.md
Freehand drawing

A simple freehand drawing application, based on Bostock's Line Drawing gist.

https://bl.ocks.org/stuart-warren/raw/5d778299fcbcb9b1343aac9d77d0fc49/?raw=true

Use your stylus, fingers or mouse to draw. The color of the line can be changed by interacting with the color palette, and the canvas can be cleared by clicking the trash in the upper-right corner of the UI.

The application uses two stacked SVG elements, one for the UI and one for the canvas. This is used to disable drawing when interacting with UI elements.

Unlike Bostock's example, this application maintains a DOM-independent object to store all the drawing's data (just look at the JavaScript console each time you complete a line).