Press "Enter" to skip to content

Makes it Easy to Draw on SVG Elements | SVG Pen Sketch

Sketch Pen SVG – An easy-to-use JavaScript library aims to make it easy to draw on SVG elements when using a digital pen (such as a Surface pen).

Great for online drawing application such as signature board, drawing board, etc.

Angular Module To Draw On Images | Ngx Image Drawing

How to make use of it:

1. Install & obtain 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 after which 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 aspect SVG element to be drawn on.

<svg>
  ...
</svg>

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

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

6. Callback features that shall be triggered 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();

SVG Drawing JavaScript Library, Creating Invisible Pen Effect in SVG, SVG pen sketch Plugin/Github

SVG-Pen-Sketch-Demo


See Demo And Download

Official Website(Desousak): Click Here

This superior jQuery/javascript plugin is developed by Desousak. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *