text: import React, { Component } from "react";
  import { render } from "react-dom";
  
  import CanvasDraw from "../../src";
  import classNames from "./index.css";
  
  class Demo extends Component {
    state = {
      color: "#ffc600",
      width: 400,
      height: 400,
      brushRadius: 10,
      lazyRadius: 12
    };
    componentDidMount() {
      // let's change the color randomly every 2 seconds. fun!
      window.setInterval(() => {
        this.setState({
          color: "#" + Math.floor(Math.random() * 16777215).toString(16)
        });
      }, 2000);
    }
    render() {
      return (
        <div>
          <div className={classNames.tools}>
            <button
              onClick={() => {
                localStorage.setItem(
                  "savedDrawing",
                  this.saveableCanvas.getSaveData()
                );
              }}
            >
              Save
            </button>
          </div>
          <CanvasDraw
            ref={canvasDraw => (this.saveableCanvas = canvasDraw)}
            brushColor={this.state.color}
            brushRadius={this.state.brushRadius}
            lazyRadius={this.state.lazyRadius}
            canvasWidth={this.state.width}
            canvasHeight={this.state.height}
          />
    
          <CanvasDraw
            disabled
            hideGrid
            ref={canvasDraw => (this.loadableCanvas = canvasDraw)}
            saveData={localStorage.getItem("savedDrawing")}
          />
       </div>
      );
    }
  }
  
  render(<Demo />, document.querySelector("#demo"));
  