Draw Image in HTML5 and Javascript

Question

My code is here

 <video id="video" width="640" height="480" autoplay></video>
  <button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

  <script>

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      video = document.getElementById("video"),
      videoObj = { "video": true },
      errBack = function(error) {
        console.log("Video capture error: ", error.code); 
      };

      // Put video listeners into place
      if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
          video.src = stream;
          video.play();
        }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
          video.src = window.webkitURL.createObjectURL(stream);
          video.play();
        }, errBack);
      }

      // Trigger photo take
      document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
      });
    }, false);

  </script>

My code is working fine but how can i get the url (i mean how can i save permanantly this)

Please help me i am new one with HTML5

Answer 1

Add an image tag and try something lie this in your snap method:

<img id="canvasImg"><img>

document.getElementById('canvasImg').src = canvas.toDataURL();

You should be able to right click and save the image.

Edit: Here's a similar thread: how to save canvas data to file