Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisvilches/portraycanvas
Parameterizable canvas library that allows you to draw on it, and get the drawn points.
https://github.com/chrisvilches/portraycanvas
bower bower-components canvas drawing front-end frontend handwriting handwriting-recognition html5 javascript user-interface
Last synced: 2 months ago
JSON representation
Parameterizable canvas library that allows you to draw on it, and get the drawn points.
- Host: GitHub
- URL: https://github.com/chrisvilches/portraycanvas
- Owner: ChrisVilches
- Created: 2017-09-13T05:24:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-18T17:08:30.000Z (over 3 years ago)
- Last Synced: 2024-11-10T20:46:11.539Z (3 months ago)
- Topics: bower, bower-components, canvas, drawing, front-end, frontend, handwriting, handwriting-recognition, html5, javascript, user-interface
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/portraycanvas
- Size: 128 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PortrayCanvas
A library that allows the user to draw on a canvas, and extract the drawn points. Useful for getting handwritten user input.
[Live demo](http://cloud.chrisvilches.com/live_demos/PortrayCanvas/)
## Download
```bash
npm install portraycanvas --save
```
or
```bash
yarn add portraycanvas
```
## Usage
Your html:
```html
```
Your Javascript:
```js
import PortrayCanvas from 'portraycanvas';
var canvas = new PortrayCanvas(document.getElementById("canvas-main"), {
// All these attributes are optional.
// Stroke size
lineWidth: 2,
// Set the color
color: '#00ff00',
// Period in which it collects points. The lower, the more points it collects.
// If it's too high, you might not get curved lines accurately.
period: 5,
// Some events...
onLineFinish: function(c){
console.log("A line was finished, here are all the lines:");
console.log(c.getLines());
},
onClear: function(){
console.log("The canvas was cleared");
},
onUndo: function(line){
console.log("This line was deleted:");
console.log(line);
}
});
```
You can programmatically call these methods:
```js
canvas.getLines(); // Get all lines
canvas.clear(); // Clear the canvas
canvas.undo(); // Remove last line you drew
canvas.setColor('#ff0000'); // Change the stroke color
canvas.revertDefaultColor(); // If you had changed the color, go back to the default one.
```
## Issues
It seems it's necessary that the canvas element defines `width` and `height`.
```html
```
This issue is being investigated. It might still work without them in some situations, but make sure the canvas works correctly even after resizing the window.
## Styling
You can initialize the canvas using the `color` option (as explained above), but you can use a `css` class in order to keep it consistent with the rest of your application:
```css
.green-canvas {
/* If you include the 'color' property, it'll be
used as the stroke color */
color: #006600;
background-color: #fafafa;
border: 3px solid black;
cursor: crosshair;
}
```
And then in your HTML:
```html
```
## Recommended CSS
You can make the canvas unselectable by applying the following CSS:
```css
.my-canvas{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
```
You can make the canvas unscrollable, which is useful for mobile pages, so that it doesn't unintentionally scroll while touching it, by applying the following CSS to your canvas.
```css
.my-canvas{
touch-action: none;
}
```
In future versions, these CSS rules will be applied automatically by the library.