Smooth Canvas Drawing Library – PortrayCanvas

Category: Javascript | October 1, 2018
Author: FeloVilches
Views Total: 644
Official Page: Go to website
Last Update: October 1, 2018
License: MIT

Preview:

Smooth Canvas Drawing Library – PortrayCanvas

Description:

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

You Might Be Interested In:


Leave a Reply