simple-drawing-board.js
Just simple minimal canvas drawing lib.
- 0 dependencies
- Modern browser compatibility
- Under 500 lines of code
For
v2.x
users, See https://github.com/leader22/simple-drawing-board.js/tree/v2.1.1
For
v1.x
users, See https://github.com/leader22/simple-drawing-board.js/tree/v1.4.1
Install
npm i simple-drawing-board
or
How to use
Prepare your canvas
element.
Then create drawing board.
; const sdb = ;
APIs
See also type definitions.
setLineSize()
sdb;sdb; // to be 1sdb; // to be 1
setLineColor()
sdb;sdb;sdb;
fill()
sdb;sdb;
clear()
sdbclear;
toggleMode()
// switch DRAW <=> ERASEsdbmode; // "draw"sdb;sdbmode; // "erase"
toDataURL()
sdb; // "data:image/png;base64,xxxxxx...."sdb; // "data:image/jpeg;base64,xxxxxx...."sdb; // compression quality
fillImageByElement()
sdb;sdb;
async fillImageByDataURL()
await sdb;await sdb;
async undo()
await sdb;
async redo()
await sdb;
destroy()
Just detach from canvas
element.
sdb;
Events
Events are available via observer
property.
drawBegin
sdbobserver;
draw
sdbobserver;
drawEnd
sdbobserver;
save
sdbobserver;
Alternatives
- Fabric.js: More and more functions and utils.
- drawingboard.js: With jQuery.
License
MIT