title: Convert an image to canvas that is already loaded
body: <p>I am working on a plugin in which I'm converting Image into Canvas and storing as data url .This function triggers on 'load' event but how can I convert an image which is already there on the page? (Don't want to refresh the page or load any image again). I tried using the Filereader() function but that also works on 'onload' concept. So how can I save the image as data url when the user clicks on the image?</p>
  
  <pre><code>   image.addEventListener("load", function () {
  
           var imgCanvas = document.createElement("canvas"),
              imgContext = imgCanvas.getContext("2d");
              imgCanvas.width = image.width;
              imgCanvas.height = image.height;
  
              imgContext.drawImage(image, 0, 0, image.width, image.height);       
              imgInfo = imgCanvas.toDataURL("image/png");
  
              localStorage.setItem("imgInfo", imgInfo);
          }, false);
  </code></pre>