title: Clipping images using html5 and javascript
body: <p>i have an image drawn to a canvas. I want to clip that image and create a new image using the clipped region from the old image. How am i suppose to do that using html5 and javascript? Clipping the image will be dynamic as like used in photoshop.</p>
  
  <pre><code>&lt;!--my javascroipt that draw the image to the canvas --&gt;
  &lt;script&gt;
   function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&amp;]' + name + '=' + '([^&amp;;]+?)(&amp;|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
      }
      function drawImage(imageObj){
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var imageX = 0;
          var imageY = 0;
          var imageWidth = imageObj.width;
          var imageHeight = imageObj.height;
          canvas.width = imageWidth;
          canvas.height = imageHeight;
          context.drawImage(imageObj, imageX, imageY);
  
      }
      var image = getURLParameter('image');
      if(image != null){
          //now put the image to the canvas lolol
          var imageObj = new Image();
          imageObj.onload = function(){
              drawImage(this);
          };
          imageObj.src = 'http://localhost/clip/temp/'+image;
      }
  &lt;/script&gt;
  &lt;!--here is my canvas..--&gt;
  &lt;div id="container" class="unselectable"&gt;
      &lt;canvas id="canvas" width="500px" height="500px" class="unselectable"&gt;
  
      &lt;/canvas&gt;&lt;br/&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>now i want to clip the image. just like what photoshop clipping path is doing to an image...</p>