A small JS library for beautiful drawing and handwriting on the HTML Canvas
- Draw/Fill/Erase modes
- Adjustable adaptive smoothing
- Events tracking the drawing - this allows the app to "replay" or reconstruct the drawing, e.g. for undo functionality
- Adjustable line thickness and colour
as a module
If you're using a tool like webpack or browserify to bundle your code, you can install it using npm.
- install atrament as a dependency using
npm install --save atrament.
- You can access the Atrament class using
const Atrament = require('atrament');
Include the script located at dist/atrament.min.js in the
<head> tag of your HTML.
Alternatively, you can use Bower:
bower install atrament and include
bower_components/atrament/dist/atrament.min.js as a script tag.
- create a
Atramentinstance passing it your canvas object:
const canvas = document;const sketchpad = canvas;
- you can also pass the width, height and default colour to the constructor:
const sketchpad = canvaswidth: 500height: 500color: 'orange';
- that's it, happy drawing!
Options & config
- clear the canvas:
- change the line thickness:
sketchpadweight = 20; //in pixels
- change the color:
sketchpadcolor = '#ff485e'; //just like CSS
- toggle between modes:
sketchpadmode = 'erase'; // eraser toolsketchpadmode = 'fill'; // click to fill areasketchpadmode = 'draw'; // defaultsketchpadmode = 'disabled'; // no modification to the canvas (will still fire stroke events)
- tweak smoothing - higher values make the drawings look much better, lower values make drawing feel a bit more responsive. Set to
sketchpadsmoothing = 13;
- toggle adaptive stroke, i.e. line width changing based on drawing speed for a more natural effect.
sketchpadadaptiveStroke = false;
- record stroke data (enables the
sketchpadrecordStrokes = true;
- export as image:
//we have to get the dataURL of the imageconst dataURL = sketchpad;//then we can, for instance, open a new window with itwindow;
These events fire when the canvas is first drawn on, and when it's cleared.
The state is stored in the
These events don't provide any data - they just inform that a stroke has started/finished.
These only fire in fill mode. The
fillstart event also contains
denoting the starting point of the fill operation (where the user has clicked).
Fires at the same time as
strokeend and contains data necessary for reconstructing the stroke.
To enable functionality such as undo/redo, stroke post-processing, and SVG export in apps using Atrament, the library can be configured to record the "pen strokes".
The first step is to enable
recordStrokes, and add a listener for the
atramentrecordStrokes = true;atrament;
The stroke can then be reconstructed using methods of the
// set drawing optionsatramentmode = strokemode;atramentweight = strokeweight;atramentsmoothing = strokesmoothing;atramentcolor = strokecolor;atramentadaptiveStroke = strokeadaptiveStroke;// don't want to modify original dataconst points = strokepoints;const firstPoint = points;// beginStroke moves the "pen" to the given position and starts the pathatrament;let prevPoint = firstPoint;while pointslength > 0const point = points;// the `draw` method accepts the current real coordinates// (i. e. actual cursor position), and the previous processed (filtered)// position. It returns an object with the current processed position.const x y = atrament;// the processed position is the one where the line is actually drawn to// so we have to store it and pass it to `draw` in the next stepprevPoint = x y ;// endStroke closes the pathatrament;
To obtain the dependencies,
cd into the atrament directory and run
You should be able to then build atrament by simply running
npm run build.
I didn't bother writing tests because it's such a small package. Contributions are welcome!