canvas: keyboard events

by Vladimir Kutepov

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<div id="app"></div>
<div id="output">click to add point<br> press Z to undo</div>

CSS

canvas {
  border: 1px solid;
}

Babel + JSX

const app = document.getElementById('app')
const output = document.getElementById('output')

class App extends React.Component {
  componentDidMount() {
    this.points = []
    this.canvasContext = this.canvas.getContext('2d')
    this.canvas.focus()
  }

  handleKeyDown = (event) => {
    if (event.keyCode === 90) {
      event.preventDefault()
      this.points.pop()
      this.draw()
    }
    output.innerHTML =
      `keyCode: ${event.keyCode}, ` +
      `key: ${event.key}, ` +
      `handled: ${event.defaultPrevented}`
  }

  addPoint = (event) => {
    const rect = this.canvas.getBoundingClientRect()
    this.points.push({
      x: event.pageX - rect.left,
      y: event.pageY - rect.top
    })
    this.draw()
  }

  draw() {
    this.canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height)
    this.points.forEach(point =>
      this.canvasContext.fillRect(point.x, point.y, 4, 4)
    )
  }

  render() {
    return (
      <canvas
        ref={ref => (this.canvas = ref)}
        width={100}
        height={100}
        tabIndex={0}
        onClick={this.addPoint}
        onKeyDown={this.handleKeyDown}
      />
    )
  }
}

ReactDOM.render(<App />, app)