SVG Drawing JavaScript Library – svg-pen-sketch

svg-pen-sketch is a JavaScript library for drawing custom SVG strokes on the webpage.

Great for online drawing app like the signature pad, drawing board, etc.

How to use it:

1. Install & download the svg-pen-sketch.

# NPM
$ npm i svg-pen-sketch --save

2. Import the svg-pen-sketch as a module.

import svgSketch from "svg-pen-sketch";

3. Or run the script build and then load the svg-pen-sketch.js from the dist folder.

$ npm install
$ npm run-script build

<script src="./dist/svg-pen-sketch.js"></script>

4. Create an SVG element svg element to be drawn on.

<svg>
  ...
</svg>

5. Create an instance of the svg-pen-sketch and customize the styles of SVG strokes

let svgSketch = SvgPenSketch.default;
const canvas = new svgSketch(document.querySelector("svg"), { 
      // stroke styles here
      "stroke": "black", 
      "stroke-width": "1px" 
});

6. Callback functions which will be triggerd when drawing.

canvas.penDownCallback = (path, event) => {
  // do something
  console.log(`Pointer location = (${event.offsetX},${event.offsetY}) @ ${event.timeStamp}`);
};
canvas.eraserDownCallback = (removedPaths, event) => {
  // do something
  if (removedPaths.length > 0)
    console.log("Removed strokes", removedPaths);
};
canvas.penUpCallback = () => {
  // do something
};
canvas.eraserUpCallback = () => {
  // do something
};

7. Update the styles of the SVG strokes.

canvas.strokeStyles = {
  "stroke": "red", 
  "stroke-width": "2px"
};

8. Return the SVG element.

canvas.getElement();

9. Toggle the use of the eraser.

canvas.toggleForcedEraser();

Changelog:

v1.2.2 (03/10/2021)

• Changed the default line function used and prevented the stroke from getting updated if the distance between points is too snall (user-configurable)

v1.1.0 (10/25/2020)

• Changed the default line function used and prevented the stroke from getting updated if the distance between points is too snall (user-configurable)