Smooth Canvas Drawing Library – PortrayCanvas

PortrayCanvas is a JavaScript drawing app that allows the user to draw smooth points and lines on a canvas element.

Install & Download:

# Yarn
$ yarn add portraycanvas
# NPM
$ npm install portraycanvas --save

How to use it:

Import the JavaScript ‘portraycanvas.min.js’ into the html file.

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

Create an HTML5 canvas element for the drawing app.

<canvas id="example" width="800" height="650"></canvas>

Initialize the drawing app.

var canvas = new PortrayCanvas(document.getElementById('example'), {
    // options here
});

Customize the drawing app with the following settings:

var canvas = new PortrayCanvas(document.getElementById('example'), {
    // line width
    lineWidth: 2,
    // color of lines & points
    color: '#00ff00',
    // period in which it collects points
    period: 5
    
});

Available event handlers.

var canvas = new PortrayCanvas(document.getElementById('example'), {
    onLineFinish: function(c){
      // do something
    },
    onClear: function(){
      // do something
    },
    onUndo: function(line){
      // do something
    }
});

Return an array of objects containing all lines you just drew.

canvas.getLines();

More API methods.

// clears all lines
canvas.clear(); 
// undo
canvas.undo(); 
// set the color of the line
canvas.setColor('#ff0000');
// reverts the default color
canvas.revertDefaultColor();

Changelog:

v1.1.1 (09/08/2021)

• fix cursor position bug