Tiny JS library for beautiful drawing and handwriting on the HTML Canvas
- Include the script located atdist/atrament.min.js in the
<head>tag of your HTML.
- 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 colour:
sketcher.colour = `#ff485e`; //just like CSS
- toggle the Erase mode:
sketcher.mode = `erase`; sketcher.mode = `draw`;
- toggle smoothing – having it on makes the drawings look much better, turning it off makes it feel a bit more responsive:
sketcher.smoothing = 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);
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!
转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » Tiny JS library for beautiful drawing and handwriting on the HTML Canvas