Draw on a canvas sketch using [Sketch](https://github.com/apt-get2Update/canvas-sketch). It gives an easy to integrate API, that helps draw on an HTML canvas. You could also choose between drawing, writing a text or using an eraser.
Last updated a year ago by thirumuruganmani .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @vhitech/canvas-sketch 
SYNC missed versions from official npm registry.


React canvas sketch

The project provides a react library, that helps build a free hand drawing board on top of HTML5 Canvas.

Sample Screen shot

Check out the Demo App


For Yarn users

yarn @vhitech/canvas-sketch

For npm users

npm i @vhitech/canvas-sketch


You can Import the library as shown below

import Sketch, { TOOL } from "@vhitech/canvas-sketch";

Maintain a state variable that helps track the coordinates of your drawing. Define a method to set the state as well.

state = {
    drawingInput: []

setDrawingInput = data => {
    this.setState({ drawingInput: data });

If you are using React Hooks the code may look like this

const [drawingInput, setDrawingInput] = useState([]);  

Create a Sketch as shown below.

<div className={styles.sketch}>
    ref={e => (this.sketch = e)}

This would embed a HTML5 Canvas on which you will be able to draw. Check out our example code

Current Tags

  • 0.1.2                                ...           latest (a year ago)

3 Versions

  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |