title: How to save a canvas consisting of image into an image object
body: <p>I have a canvas which has a image within. Now I am trying to save the canvas as an Image object which I want to use in another canvas. But every time I get an empty canvas (w/o the image). Here is what i am doing:</p>
  
  <p><strong>canvas.toDataURL()</strong></p>
  
  <pre><code>var imageObj = new Image();
  
  imageObj.onload = function() {
      context.drawImage(imageObj,200,20,100,150);
  };
  imageObj.src = "images/yoda.jpg";
  var canvasImage = canvas.toDataURL();
  </code></pre>
  
  <p>and <strong>canvas.getContext("2d").getImageData()</strong></p>
  
  <pre><code>var imageObj = new Image();
  
  imageObj.onload = function() {
      context.drawImage(imageObj,200,20,100,150);
  };
  imageObj.src = "images/yoda.jpg"; 
  var imageData = context.getImageData(195,15,110,160);
  </code></pre>
  
  <p>But this doesn't seem to save the Image present in the Canvas. Any help?</p>
  
  <p>See live preview</p>
  
  <p><a href="http://jsfiddle.net/tvnbD/17/" rel="nofollow">http://jsfiddle.net/tvnbD/17/</a></p>