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

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.