Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @vhitech/canvas-sketch with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var canvasSketch = require("@vhitech/canvas-sketch")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@vhitech/canvas-sketch v0.1.2

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.

./docs/

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

Installation

For Yarn users

yarn @vhitech/canvas-sketch

For npm users

npm i @vhitech/canvas-sketch

Usage

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}>
  <Sketch
    ref={e => (this.sketch = e)}
    tool={TOOL.PENCIL}
    color="#234494"
    drawInput={drawingInput}
    updateToolInfo={this.setDrawingInput}
  />
</div>

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free