The drawingtablet.js the library creates a customizable drawing pad where users can draw sketches, doodle or jot notes directly within your website or application.

Users can quickly correct mistakes with the undo (Ctrl + Z) and redo (Ctrl + Y) functions, simulating the natural drawing process. In addition, users can instantly download their creations with Ctrl + E, or save their work with Ctrl + S. DrawingTablet is a simple and fast way to implement scribbling into your projects!

Must Read: Angular Module To Draw On Images | Ngx Image Drawing

How to make use of it:

1. Download the DrawingTablet.js library and include it in your project.

<script src="/lib/DrawingTablet.min.js"></script>

2. This will provide a 600 x 600 canvas with functions like undo (Ctrl + Z), redo (Ctrl + Y), download (Ctrl + E), autosave and, save (Ctrl + S):

const dt = new DrawingTablet();

const dt = new DrawingTablet("#canvas-container", {
  logs: true, // default: false
  fullscreen: true, // default: false
  brushSize: 5, //default: 2
  bg: "#ffffff",
  autosave: true, // default: true
});

3. Setter Methods

dt.bg = "color"
dt.brushSize = number
dt.brushColor = "color"

4. Getter Methods

dt.brushColor
dt.brushSize
dt.opts
dt.ctx
dt.canvas

5. General Method

dt.log()
dt.redraw()
dt.clearOnlyScreen()
dt.clear()
dt.undo()
dt.redo()
dt.save()
dt.clearSaved()
dt.drawFromSaved()
dt.download(filename?)

See Demo And Download

Official Website(hicodersofficial): Click Here

This superior jQuery/javascript plugin is developed by hicodersofficial. For extra advanced usage, please go to the official website.