Lightweight Canvas Drawing Pad For The Web – DrawingTablet.js

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