Tiny JS library for beautiful drawing and handwriting on the HTML Canvas
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.
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.
- require the package in a module using
var atrament = require('atrament');
- You can also access the Atrament class using
var Atrament = require('atrament').Atrament;
- create a
atramentpassing in the selector string of your canvas:
var sketcher = ;//or use a more object-oriented stylevar sketcher = '#mySketcher';//you can also pass the canvas Node itselfvar sketcher = document;
- you can also pass the width, height and default colour to the function:
var sketcher = ;
- that's it, happy drawing!
Options & config
- clear the canvas:
- change the line thickness:
sketcherweight = 20; //in pixels
- change the color:
sketchercolor = '#ff485e'; //just like CSS
- toggle between modes:
sketchermode = 'erase'; // eraser toolsketchermode = 'fill'; // click to fill areasketchermode = 'draw'; // default
- toggle smoothing - having it on makes the drawings look much better, turning it off makes it feel a bit more responsive.
sketchersmoothing = false;
- toggle adaptive stroke, i.e. line width changing based on drawing speed for a more natural effect.
sketcheradaptiveStroke = false;
- change the opacity:
sketcheropacity = 05; //number between 0-1
- export as image:
//we have to get the dataURL of the imagevar dataURL = sketcher;//then we can, for instance, open a new window with itwindow;
dirtyevent – do something when the canvas becomes dirty:
// this also fires when you clear the canvas// the dirty property is then false// note that we attach the event to canvascanvas;
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!