title: Draw video on canvas HTML5
body: <p>I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas).</p>
  
  <p>Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played.
  Two problems:</p>
  
  <p>1) the video doesn't play (the function only draws the first frame), but his audio does</p>
  
  <p>2) how can I get previously drawn videos to stop?</p>
  
  <p>Demo: <a href="http://jsfiddle.net/e3c3kore/" rel="noreferrer">http://jsfiddle.net/e3c3kore/</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;canvas id="canvas" width="800" height="600"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  
  
  var canvas, context, xStart, yStart, xEnd, yEnd;
  
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  canvas.addEventListener("mousedown", mouseDown);
  canvas.addEventListener("mouseup", mouseUp);
  
  function mouseDown(e) {
      xStart = e.offsetX;
      yStart = e.offsetY;
  }
  
  function mouseUp(e) {
      xEnd = e.offsetX;
      yEnd = e.offsetY;
      if (xStart != xEnd &amp;&amp; yStart != yEnd) {
      var video = document.createElement("video");
                          video.src = "http://techslides.com/demos/sample-videos/small.mp4";
                          video.addEventListener('loadeddata', function() {
                              video.play();
                              context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart);
                          });
      }
  }
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/e3c3kore/" rel="noreferrer">http://jsfiddle.net/e3c3kore/</a></p>