react-canvas.js

class MyCanvas extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: ''}

    this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount() {
    this.render()
  }

  handleClick(event) {
    const rect = this.canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    const ctx = this.canvas.getContext('2d')
    ctx.fillStyle = 'white'
    ctx.fillRect(x, y, 3, 3)
  }

  render() {
    return (
      <div>
        <canvas
          onClick={this.handleClick}
          style={{
            backgroundColor: this.props.bgColor
          }}
          width={400}
          height={300}
          ref={element => this.canvas = element}/>
      </div>
    )
  }
}

window.MyCanvas = MyCanvas