Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dealfonso/canvashanddraw
Utility to draw a set of points in a canvas, trying to figure that it is hand drawn
https://github.com/dealfonso/canvashanddraw
canvas drawing hand-drawn html5 javascript
Last synced: about 7 hours ago
JSON representation
Utility to draw a set of points in a canvas, trying to figure that it is hand drawn
- Host: GitHub
- URL: https://github.com/dealfonso/canvashanddraw
- Owner: dealfonso
- License: apache-2.0
- Created: 2022-07-18T15:08:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-03T13:38:14.000Z (over 2 years ago)
- Last Synced: 2023-03-06T16:42:11.144Z (over 1 year ago)
- Topics: canvas, drawing, hand-drawn, html5, javascript
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Canvas Hand Draw
This is a utility to draw a set of points in an HTML5 Canvas, as if it was hand drawn by a human.
The need of having this component comes from an IA application, where a drawing is captured from a hand device (i.e. tablet or smartphone), and then the image is classified using a Neural Network. The points are captured to show the drawing to a human, who makes the initial classification to train the NN.
> The image can be later retrieved in raw to use it in your application.
The effect is shown in the next image:
## Including in your web page
### From a CDN
The easiest way to use _Canvas Hand Draw_ is to include it on your web page using a CDN:
```html
```
Please pay attention to the version that you want to use (in this example, it will use version 1)
### From your servers
While my advice is to use a CDN, it is possible to host _Canvas Hand Draw_ on your servers.
1. Get the code and generate the files to serve.
```console
$ git clone https://github.com/dealfonso/canvashanddraw.git
$ cd canvashanddraw
$ make
```
2. Copy the files to your web server and server them:
```console
$ cp canvashanddraw*.js /path/to/my/server
```
## Using
### Declarative method
The easiest method to use _Canvas Hand Draw_ is to include a `canvas` tag in an HTML document, with the class `canvashanddraw` and include the `.js` file, and use the attribute `data-points` to define the path to draw.
As an example, the next canvas...
```html
```
will produce the next graph
.
Using the options, it is possible to draw with more quality and drawing dynamics, to get the next graph (using exactly the same points):
.
### Programmatically
If wanted to use the programmatical way, it is possible to get any canvas and create the `CanvasHandDraw` object and use the methods:
```javascript
let myCanvasObject = new CanvasHandDraw(document.getElementById('mycanvas'));
myCanvasObject.draw([{ "x": 2.1612899121945635, "y": 29.677419494076844 }, { "x": 2.1612899121945635, "y": 29.612904347039855 }, (...), { "x": 11.967742880837523, "y": 37.612903665505826 }]);
```