Just simple minimal canvas drawing lib.
npm install simple-drawing-boardJust simple minimal canvas drawing lib.
- 0 dependencies
- Modern browser compatibility
- Under 500 lines of code
> For v2.x users, See https://github.com/leaysgur/simple-drawing-board.js/tree/v2.1.1
> For v1.x users, See https://github.com/leaysgur/simple-drawing-board.js/tree/v1.4.1
sh
npm i simple-drawing-board
`or
html
`How to use
Prepare your
element.`html
`Then create drawing board.
javascript
import { create } from "simple-drawing-board.js";const sdb = create(document.getElementById("canvas"));
`APIs
See also type definitions.
$3
js
sdb.setLineSize(10);
sdb.setLineSize(0); // to be 1
sdb.setLineSize(-1); // to be 1
`$3
js
sdb.setLineColor("#0094c8");
sdb.setLineColor("red");
sdb.setLineColor("#0f0");
`$3
js
sdb.fill("#000");
sdb.fill("orange");
`$3
js
sdb.clear();
`$3
js
// switch DRAW <=> ERASE
sdb.mode; // "draw"
sdb.toggleMode();
sdb.mode; // "erase"
`$3
js
sdb.toDataURL(); // "data:image/png;base64,xxxxxx...."
sdb.toDataURL({ type: "image/jpeg" }); // "data:image/jpeg;base64,xxxxxx...."
sdb.toDataURL({ type: "image/jpeg", quality: 0.3 }); // compression quality
`$3
js
sdb.fillImageByElement(document.getElementById("img"));
sdb.fillImageByElement(document.getElementById("img"), { isOverlay: true });
`
$3
js
await sdb.fillImageByDataURL("data:image/png;base64,xxxxxx....");
await sdb.fillImageByDataURL("data:image/png;base64,xxxxxx....", { isOverlay: true });
`$3
js
await sdb.undo();
`$3
js
await sdb.redo();
`$3
Just detach from
element.`js
sdb.destroy();
`Events
Events are available via
property.$3
`js
sdb.observer.on("drawBegin", (coords) => {
console.log(coords.x, coords.y);
});
`$3
js
sdb.observer.on("draw", (coords) => {
console.log(coords.x, coords.y);
});
`$3
js
sdb.observer.on("drawEnd", (coords) => {
console.log(coords.x, coords.y);
});
`$3
js
sdb.observer.on("save", (curImg) => {
console.log(curImg); // "data:image/png;base64,xxxxxx...."
});
``