react-canvas-draw

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
  };

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.