Author: | os1ma |
---|---|
Views Total: | 1,012 views |
Official Page: | Go to website |
Last Update: | September 3, 2022 |
License: | MIT |
Preview:

Description:
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();