PERSIMO

About

Paint on HTML canvas. Check demo at https://davidetriso.github.io/persimo/

Dependencies

No dependencies

Settings / Options

Name	Default	Type	Description	Required or Optional
canvas	undefined	DOM element	The canvas element	Required
width	undefined	int > 0	The width of the canvas (same as attribute width, not the width on screen)	Optional
height	undefined	int > 0	The height of the canvas	(same as attribute height, not the height on screen)
color	'#000'	string	The stroke color	Optional
size	10	int > 0	The stroke size	Optional

Installation

Download the package from GitHub and get the compiled files from the dist folder.

The plugin is also available on npm:

npm install persimo

Usage

1. Include the JS script perSimo.js - or the minified production script perSimo.min.js - in the head or the body of your HTML file.
2. Initialise the widget.

HTML

Use following HTML markup for canvas:

<canvas with="600" height="400"></canvas>

NOTE: the attributes width and height are mandatory on canvas element.

JS: Initialise

Initialise the plugin as follows:

var draw = new PerSimo({
  canvas: document.getElementById('canvasID'),
  width: 600,  //same as set in the canvas width element
  height: 400, //same as set in the canvas width element
  color: '#000',
  size: 10
});

Methods

The plugin supports following methods: setColor, setSize.

setColor:

draw.setColor('#ccc');

setSize:

draw.setSize(30);

LICENSE

This project is licensed under the terms of the MIT license.

See LICENSE.md for detailed informations.