Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including atrament with all npm packages installed. Try it out:

var atrament = require("atrament")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

atrament v0.3.1

Tiny JS library for beautiful drawing and handwriting on the HTML Canvas


Tiny JS library for beautiful drawing and handwriting on the HTML Canvas

Build Status

Atrament is a lightweight library that enables the user to draw smooth, natural drawings and handwriting on the HTML canvas. The algorithm was originally developed about 2 weeks after I started learning JavaScript, as I wanted to build a collaborative drawing space on the web, which ended up being 1WALL. I wanted the drawing to feel natural and comfortable, and the result to be smooth and pleasing. Years later, I've taken the algorithm, improved it, rewrote it in ES6 and made it into a neat little library.

Here's a basic demo.



script tag

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;


Thanks to rubenstolk, you can also use the sc-atrament Polymer element.


  • create a <canvas> tag, e.g.:
<canvas id="mySketcher" width="500px" height="500px">
  • in your JavaScript, call atrament passing 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. true by default.
sketcher.smoothing = false;
  • toggle adaptive stroke, i.e. line width changing based on drawing speed for a more natural effect. true by default.
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;
  • dirty event – 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 =>;


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!


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free