Minimal JavaScript Drawing Library – handwriting-canvas

handwriting-canvas is a lightweight JavaScript drawing library that enables visitors to draw graphics on an HTML5 canvas element.

How to use it:

1. Install & download.

# NPM
$ npm i handwriting-canvas
2. Import the handwriting-canvas.

<script src="/dist/main.min.js"></script>

3. Create a Canvas element as a drawing area.

<canvas id="draw-area"></canvas>

4. Initialize the handwriting-canvas.

const canvasElement = document.querySelector('#draw-area');
const canvas = new HandwritingCanvas(canvasElement);

5. Export the graphic as an image.

<div id="result"></div>

if (canvas.isEmpty) {
  return;
}
const blob = await canvas.toBlob('image/png');
const imageUrl = URL.createObjectURL(blob);
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
const createdPngElement = document.querySelector('#result');
if (createdPngElement.firstChild) {
  createdPngElement.removeChild(createdPngElement.firstChild);
}
createdPngElement.appendChild(imgElement);

6. Clear the canvas.

canvas.clear();