Paint on HTML canvas. Check demo at https://davidetriso.github.io/persimo/
No dependencies
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 |
Download the package from GitHub and get the compiled files from the dist
folder.
The plugin is also available on npm:
npm install persimo
- Include the JS script perSimo.js - or the minified production script perSimo.min.js - in the head or the body of your HTML file.
- Initialise the widget.
Use following HTML markup for canvas:
<canvas with="600" height="400"></canvas>
NOTE: the attributes width and height are mandatory on canvas element.
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
});
The plugin supports following methods: setColor
, setSize
.
draw.setColor('#ccc');
draw.setSize(30);
This project is licensed under the terms of the MIT license.
See LICENSE.md for detailed informations.