title: Create Canvas from image on javascript
body: <p>I'm trying to learn manipulate image and canvas in javascript. I'm wondering why we can not do : </p>
  
  <pre><code>var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
           var can = document.getElementById('canvas');
           var ctx = can.getContext('2d');
           var img = new Image();
           img.onload = function(){
  
           }
           img.src =urlimg ;
           can.width = img.width;
           can.height = img.height;
           ctx.drawImage(img, 0, 0, img.width, img.height);
           $('#image1').attr('src', img.src);
  </code></pre>
  
  <p>And we have to do this : </p>
  
  <pre><code>var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
           var can = document.getElementById('canvas');
           var ctx = can.getContext('2d');
           var img = new Image();
           img.onload = function(){
               can.width = img.width;
               can.height = img.height;
               ctx.drawImage(img, 0, 0, img.width, img.height);
           }
           img.src =urlimg ;
           $('#image1').attr('src', img.src);
  </code></pre>
  
  <p>Is it due to time of image to load ?</p>
  
  <p>Can I create a canvas from an existing object image ?</p>
  
  <p>Thanks.</p>