Create Canvas from image on javascript -

i'm trying learn manipulate image , canvas in javascript. i'm wondering why can not :

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); 

and have :

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); 

is due time of image load ?

can create canvas existing object image ?

thanks.

is due time of image load ?

yes in part, because image loading asynchronous next lines of code executed right away while image loaded. let know event raised when it's done.

can create canvas existing object image ?

no (not directly), can draw image onto canvas initialize (as do):

ctx.drawimage(imageelement, 0, 0, width, height);