simple-drawing-board
v3.1.3
Published
Just simple minimal canvas drawing lib.
Downloads
3,881
Maintainers
Readme
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/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
Install
npm i simple-drawing-board
or
<script src="./path/to/dist/simple-drawing-board.min.js"></script>
How to use
Prepare your canvas
element.
<canvas id="canvas" width="500" height="300"></canvas>
Then create drawing board.
import { create } from "simple-drawing-board.js";
const sdb = create(document.getElementById("canvas"));
APIs
See also type definitions.
setLineSize()
sdb.setLineSize(10);
sdb.setLineSize(0); // to be 1
sdb.setLineSize(-1); // to be 1
setLineColor()
sdb.setLineColor("#0094c8");
sdb.setLineColor("red");
sdb.setLineColor("#0f0");
fill()
sdb.fill("#000");
sdb.fill("orange");
clear()
sdb.clear();
toggleMode()
// switch DRAW <=> ERASE
sdb.mode; // "draw"
sdb.toggleMode();
sdb.mode; // "erase"
toDataURL()
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
fillImageByElement()
sdb.fillImageByElement(document.getElementById("img"));
sdb.fillImageByElement(document.getElementById("img"), { isOverlay: true });
async fillImageByDataURL()
await sdb.fillImageByDataURL("data:image/png;base64,xxxxxx....");
await sdb.fillImageByDataURL("data:image/png;base64,xxxxxx....", { isOverlay: true });
async undo()
await sdb.undo();
async redo()
await sdb.redo();
destroy()
Just detach from canvas
element.
sdb.destroy();
Events
Events are available via observer
property.
drawBegin
sdb.observer.on("drawBegin", (coords) => {
console.log(coords.x, coords.y);
});
draw
sdb.observer.on("draw", (coords) => {
console.log(coords.x, coords.y);
});
drawEnd
sdb.observer.on("drawEnd", (coords) => {
console.log(coords.x, coords.y);
});
save
sdb.observer.on("save", (curImg) => {
console.log(curImg); // "data:image/png;base64,xxxxxx...."
});
Alternatives
- Fabric.js: More and more functions and utils.
- drawingboard.js: Need jQuery.
License
MIT