Author: | hicodersofficial |
---|---|
Views Total: | 375 views |
Official Page: | Go to website |
Last Update: | May 26, 2023 |
License: | MIT |
Preview:

Description:
The DrawingTablet.js library creates a customizable drawing pad where users can sketch, doodle, or jot down notes directly within your website or application.
Users can quickly correct mistakes with the undo (Ctrl + Z) and redo (Ctrl + Y) functionalities, mimicking the natural drawing process. Additionally, users can download their creations instantly using Ctrl + E, or save their work with Ctrl + S. The autosave feature ensures no work is ever lost accidentally.
How to use it:
1. Download and insert the DrawingTablet.js library into your project.
<script src="/lib/DrawingTablet.min.js"></script>
2. Create a new DrawingTablet instance and pass the following options:
const instance = new DrawingTablet("#canvas-container", { // options & defaults width: 600, height: 600, size: undefined, bg: "#167e60", color: "#000000", brushSize: 2, logs: false, fullSize: false, fullWidth: false, fullHeight: false, fullscreen: false, lineCap: "round", lineJoin: "round", overflow: "hidden", scale: 1, autosave: true, });
3. API methods.
instance.log() instance.redraw() instance.clearOnlyScreen() instance.clear() instance.undo() instance.redo() instance.save() instance.clearSaved() instance.drawFromSaved() instance.download(filename?) instance.pencil() instance.highlighter() instance.eraser()
4. Getters & setters.
instance.brushColor instance.brushSize instance.opts instance.ctx instance.canvas instance.bg = "color" instance.brushSize = number instance.brushColor = "color"
Changelog:
05/26/2023
- Added pencil, eraser & highlighter