# simple-drawing-board

> Just simple minimal canvas drawing lib.

Latest version **3.1.3** (published 2024-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-drawing-board
pnpm add simple-drawing-board
yarn add simple-drawing-board
bun add simple-drawing-board
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2024-09-12 |
| First published | 2016-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 73.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 81 |
| Author | leaysgur |
| Maintainers | leaysgur |
| Keywords | canvas, drawing, drawing-board, vanilla |

## Links

- npm: https://www.npmjs.com/package/simple-drawing-board
- Repository: https://github.com/leaysgur/simple-drawing-board.js
- Issues: https://github.com/leaysgur/simple-drawing-board.js/issues
- npm.io page: https://npm.io/package/simple-drawing-board

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.1.3 (latest) — 2024-09-12
- 3.1.2 — 2020-11-01
- 3.1.1 — 2020-06-09
- 3.0.0 — 2020-04-12
- 2.1.1 — 2020-04-09
- 2.1.0 — 2020-04-09
- 2.0.3 — 2020-03-02
- 2.0.2 — 2020-01-06
- 2.0.1 — 2019-05-23
- 2.0.0 — 2019-05-23
- 1.4.1 — 2018-06-14
- 1.4.0 — 2017-11-01
- 1.3.9 — 2017-11-01
- 1.3.8 — 2017-10-16
- 1.3.7 — 2017-10-13
- … 7 more at https://npm.io/package/simple-drawing-board/versions

## 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
```sh
npm i simple-drawing-board
```

or

```html
<script src="./path/to/dist/simple-drawing-board.min.js"></script>
```

## How to use

Prepare your `canvas` element.

```html
<canvas id="canvas" width="500" height="300"></canvas>
```

Then create drawing board.

```javascript
import { create } from "simple-drawing-board.js";

const sdb = create(document.getElementById("canvas"));
```

## APIs

See also [type definitions](./index.d.ts).

### setLineSize()
```js
sdb.setLineSize(10);
sdb.setLineSize(0);  // to be 1
sdb.setLineSize(-1); // to be 1
```

### setLineColor()
```js
sdb.setLineColor("#0094c8");
sdb.setLineColor("red");
sdb.setLineColor("#0f0");
```

### fill()
```js
sdb.fill("#000");
sdb.fill("orange");
```

### clear()
```js
sdb.clear();
```

### toggleMode()
```js
// switch DRAW <=> ERASE
sdb.mode; // "draw"
sdb.toggleMode();
sdb.mode; // "erase"
```

### toDataURL()
```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
```

### fillImageByElement()
```js
sdb.fillImageByElement(document.getElementById("img"));
sdb.fillImageByElement(document.getElementById("img"), { isOverlay: true });
```


### async fillImageByDataURL()
```js
await sdb.fillImageByDataURL("data:image/png;base64,xxxxxx....");
await sdb.fillImageByDataURL("data:image/png;base64,xxxxxx....", { isOverlay: true });
```

### async undo()
```js
await sdb.undo();
```

### async redo()
```js
await sdb.redo();
```

### destroy()

Just detach from `canvas` element.

```js
sdb.destroy();
```

## Events

Events are available via `observer` property.

### drawBegin
```js
sdb.observer.on("drawBegin", (coords) => {
    console.log(coords.x, coords.y);
});
```

### draw
```js
sdb.observer.on("draw", (coords) => {
    console.log(coords.x, coords.y);
});
```

### drawEnd
```js
sdb.observer.on("drawEnd", (coords) => {
    console.log(coords.x, coords.y);
});
```

### save
```js
sdb.observer.on("save", (curImg) => {
    console.log(curImg); // "data:image/png;base64,xxxxxx...."
});
```

## Alternatives
- [Fabric.js](https://github.com/kangax/fabric.js): More and more functions and utils.
- [drawingboard.js](https://github.com/Leimi/drawingboard.js): Need jQuery.

## License
MIT

---
_Source: https://npm.io/package/simple-drawing-board · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._