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
<canvas id="mySketcher" width="500px" height="500px">
atramentpassing in the selector string of your canvas:
var sketcher = atrament('#mySketcher'); //or use a more object-oriented style var sketcher = new Atrament('#mySketcher'); //you can also pass the canvas Node itself var sketcher = new Atrament(document.querySelector('#mySketcher'));
- you can also pass the width, height and default colour to the function:
var sketcher = atrament('#mySketcher', 500, 500, 'orange');
- that's it, happy drawing!
Options & config
- clear the canvas:
- change the line thickness:
sketcher.weight = 20; //in pixels
- change the color:
sketcher.color = '#ff485e'; //just like CSS
- toggle between modes:
sketcher.mode = 'erase'; // eraser tool sketcher.mode = 'fill'; // click to fill area sketcher.mode = 'draw'; // default
- toggle smoothing - having it on makes the drawings look much better, turning it off makes it feel a bit more responsive.
sketcher.smoothing = false;
- toggle adaptive stroke, i.e. line width changing based on drawing speed for a more natural effect.
sketcher.adaptiveStroke = false;
- change the opacity:
sketcher.opacity = 0.5; //number between 0-1
- export as image:
//we have to get the dataURL of the image var dataURL = sketcher.toImage(); //then we can, for instance, open a new window with it window.open(dataURL);
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 canvas canvas.addEventListener('dirty', e => console.info(sketcher.dirty));
To obtain the dependencies,
cd into the atrament directory and run
npm install. 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!