class MyRect extends Component<Props, State> {
  lastRezize: any

  state = {
    width: window.innerWidth,
    height: window.innerHeight
  }


  componentDidMount() {
    this.updateCanvas()
    window.addEventListener("resize", this.resizeCanvas)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeCanvas);
  }

  updateCanvas() {
    const canvas = document.getElementById('canvass') as HTMLCanvasElement
    const ctx: CanvasRenderingContext2D = canvas.getContext('2d')
    for (let x = 0; x < this.state.width; x += 32) {
      for (let y = 0; y < this.state.height; y += 32) {
        ctx.fillRect(x, y, 3, 3)
      }
    }
  }
  resizeCanvas = () => {
 	clearTimeout(this.lastResize)

	this.lastResize = setTimeout(() => {
		this.setState({
	      width: window.innerWidth,
    	  height: window.innerHeight
	    })
    	this.updateCanvas()
	},200)
  }

  render() {
    const { classes } = this.props
    return (
      <div className={classes.canvas}>
        <canvas id="canvass" ref="canvas" width={this.state.width + 'px'} height={this.state.height + 'px'}/>
      </div>
    )
  }
}