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:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
If you're using a tool like webpack or browserify to bundle your code, you can install it using npm.
npm install --save atrament.
var atrament = require('atrament');
var Atrament = require('atrament').Atrament;
<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'));
var sketcher = atrament('#mySketcher', 500, 500, 'orange');
sketcher.weight = 20; //in pixels
sketcher.color = '#ff485e'; //just like CSS
sketcher.mode = 'erase'; // eraser tool sketcher.mode = 'fill'; // click to fill area sketcher.mode = 'draw'; // default
sketcher.smoothing = false;
sketcher.adaptiveStroke = false;
sketcher.opacity = 0.5; //number between 0-1
//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
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!