title: mouseclick and mousemove events giving offset errors in react canvas
body: <h2>Premise</h2>
  
  <p>I am trying to convert my simple javascript canvas into React.js code. I am having trouble setting up mouse click and mouse move events in React.js. </p>
  
  <h2>Error</h2>
  
  <p>I am getting </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'offsetLeft' of undefined
      at HTMLCanvasElement.click_buildings
  
  TypeError: Cannot read property 'offsetLeft' of undefined
  HTMLCanvasElement.onMouseMove
  </code></pre>
  
  <p>I guess either mouse events don't bind or it cannot read some values because of scope. I can't figure out which one it is, or how to resolve it?</p>
  
  <p>Thanks in advance!</p>
  
  <h2>Code</h2>
  
  <p>Here is my code below:</p>
  
  <pre><code>class Economy extends React.Component {
      componentDidMount() {
        this.updateCanvas();
        let source = null;
      }
      updateCanvas() {
        const canvas = this.refs.gameScreen;
        let ctx = canvas.getContext("2d");
        const canvas_buildings = this.refs.buildings;
        const ctx_buildings = canvas_buildings.getContext("2d");
        canvas.addEventListener("mousemove", this.onMouseMove, false);
        canvas.addEventListener("click", this.click, false);
        canvas_buildings.addEventListener("click", this.click_buildings, false);
        let assigned_cordinates = [];
        var img = new Image();
        var img_copper = new Image();
        img_copper.src = Copper;
        img_copper.onload = function() {
          ctx_buildings.drawImage(img_copper, 0, 0, 90, 120);
      }
      onMouseMove(e) {
        var x = e.clientX - this.canvas.offsetLeft;
        var y = e.clientY - this.canvas.offsetTop;
        var x_cord = Math.trunc(x / 90);
        var y_cord = Math.trunc(y / 120);
        if (this.assigned_cordinates.indexOf(this.old_x + "" + this.old_y) === -1) {
          this.ctx.clearRect(this.old_x * 90, this.old_y * 120, 90, 120);
        }
        if (this.assigned_cordinates.indexOf(x_cord + "" + y_cord) === -1) {
          if (this.source === "copper") {
            this.ctx.drawImage(this.img_copper, x_cord * 90, y_cord * 120, 90, 120);
          } else if (this.source === "none") {
          }
        }
        this.old_x = x_cord;
        this.old_y = y_cord;
      }
      click(e) {
        console.log(this.assigned_cordinates);
        var x = e.clientX - this.canvas.offsetLeft;
        var y = e.clientY - this.canvas.offsetTop;
        var x_cord = Math.trunc(x / 90);
        var y_cord = Math.trunc(y / 120);
        if (this.assigned_cordinates.indexOf(x_cord + "" + y_cord) === -1) {
          if (this.source === "copper") {
            this.ctx.drawImage(this.img_copper, x_cord * 90, y_cord * 120, 90, 120);
            this.assigned_cordinates.push(x_cord + "" + y_cord);
          } else if (this.source === "none") {
          }
        }
      }
      click_buildings(e) {
        var x = e.clientX - this.canvas_buildings.offsetLeft;
        var x_cord_buildings = Math.trunc(x / 90);
        if (x_cord_buildings === 0) {
          this.source = "copper";
        }
      }
      render() {
        return(
          &lt;div className="screens"&gt;
              &lt;canvas ref="buildings" className="buildings" width={800} height={100}/&gt;
              &lt;canvas ref="gameScreen"  className="gameScreen" width={800} height={600}/&gt;
          &lt;/div&gt;
        )
      }
    }
  </code></pre>