React Component for drawing in canvas
Switch branches/tags
Nothing to show
Clone or download
embiem Merge pull request #6 from mttcnnff/pass-className
Pass className from props of CanvasDraw component
Latest commit 16fc485 Oct 20, 2018

React Canvas Draw

Travis npm package Coveralls

A simple yet powerful canvas-drawing component for React (Demo).


Install via NPM:

npm install react-canvas-draw --save

or YARN:

yarn add react-canvas-draw

No additional dependencies needed.


import React from "react";
import ReactDOM from "react-dom";
import CanvasDraw from "react-canvas-draw";

  <CanvasDraw />,

For more examples, like saving and loading a drawing ==> look into the /demo/src folder.

Even more examples are coming, check back soon!


static defaultProps = {
  loadTimeOffset: 5,
  brushSize: 6,
  brushColor: "#444",
  canvasWidth: 400,
  canvasHeight: 400,
  disabled: false,
  imgSrc: ""


Useful functions that you can call, e.g. when having a reference to this component:

  • getSaveData() returns the drawing's save-data as stringified JSON
  • loadSaveData(saveData: String, immediate: Boolean) loads a previously saved drawing using the saveData string, as well as an optional boolean flag to load it immediately, instead of live-drawing it.
  • clear() clears the canvas completely
  • undo() removes the latest change to the drawing. This includes everything drawn since the last MouseDown event.
  • drawLine(line) to draw a line. This can be useful if you want to automate drawing. The line parameter is an object of the following form:
const line = {
  color: this.props.brushColor,
  size: this.props.brushSize,
  startX: this.x,
  startY: this.y,
  endX: newX,
  endY: newY

Local Development

This repo was kickstarted by nwb's awesome react-component starter.

You just need to clone it, yarn it & start it!


If you want to save large strings, like the stringified JSON of a drawing, I recommend you to use pieroxy/lz-string for compression. It's LZ compression will bring down your long strings to only ~10% of it's original size.


MIT, see LICENSE for details.