title: Rectangle selection on canvas inside React component on MouseMove event
body: <p>I need to be able to make rectangle selections inside a canvas element.
  Here's a small codepen that shows an approximate functionality I'm trying to implement: <a href="http://codepen.io/yakovenkodenis/pen/EZyBjm" rel="nofollow noreferrer">http://codepen.io/yakovenkodenis/pen/EZyBjm</a></p>
  
  <p>I've googled around and found several examples, but they mostly didn't use <code>canvas</code> element, but a <code>div</code> instead. I tried to integrate this "<code>div</code> approach" into my React component, but it didn't work.</p>
  
  <p>I have a controlled React component called <code>CanvasVideo</code> that controlls the <code>canvas</code> element, here's a part of it:</p>
  
  <pre><code>export default class CanvasVideo extends Component {
      // ............... more stuff above ...........
      getCanvas() {
          return this.refs.canvas;
      }
  
      render () {
          return (
              &lt;div className="canvas-video"&gt;
                  &lt;canvas
                      height={this.props.height}
                      ref="canvas"
                      width={this.props.width}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I use this component inside another component called <code>VideoContainer</code>:</p>
  
  <pre><code>class VideoContainer extends Component {
      componentDidMount() {
          const { video } = this.refs;
  
          // this is how I can access the actual canvas DOM element.
          const canvas = video.getCanvas();
      }
      render() {
          const videoSrc = {
              src: 'http://www.w3schools.com/html/mov_bbb.mp4',
              type: 'video/mp4'
          };
  
          return (
              &lt;div className="canvas-video"&gt;
                  &lt;CanvasVideo
                      autoPlay={true}
                      height={480}
                      width={640}
                      loop={true}
                      muted={true}
                      ref='video'
                      src={videoSrc}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Inside my <code>VideoContainer</code> I need to be able to make rectangle selections, similar to those in <a href="http://codepen.io/yakovenkodenis/pen/EZyBjm" rel="nofollow noreferrer">codepen above</a>, get the coordinates of that rectangle relative to the canvas size and on the <code>mouseup</code> event assign these coordinates into the state of <code>VideoContainer</code> component.</p>
  
  <p>I've tried to integrate <a href="http://jsfiddle.net/d9BPz/546/" rel="nofollow noreferrer">this example</a> into my component, but the selections didn't work and moreover, it is in itself a bit buggy.</p>
  
  <hr>
  
  <p>Could you please help me to implement this functionality correctly?</p>