React Canvas Draw

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

Installation

Install via NPM:

npm install react-canvas-draw --save

or YARN:

yarn add react-canvas-draw

No additional dependencies needed.

Usage

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

ReactDOM.render(
  <CanvasDraw />,
  document.getElementById('root')
);

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

Even more examples are coming, check back soon!

Props

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

Functions

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!

Tips

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.

License

MIT, see LICENSE for details.

braveoyster/react-canvas-draw