image load not with canvas -

i'm try load image on webpage image can not display.

these code in body tage

<canvas height="400" width=""400"" id="c"></canvas>                  <script>                     var c=document.queryselector("#c");                     var ctx=c.getcontext("2d");                      var image=new image();                     image.onload=function(){                         console.loge("loaded image");                         ctx.drawimage(image,0,0,c.width,c.height);                      }                     image.src="barn.jpg";                 </script> 

i not sure asking, @marke commented, there syntax errors, wouldn't call bugs. way see need put image.src="barn.jpg"; before image.onload(); function. how make code:

---

<canvas height="400" width="400" id="c"></canvas> <script>     var c=document.queryselector("#c");     var ctx=c.getcontext("2d");      var image=new image();     image.src="barn.jpg";      image.onload=function(){         console.log("loaded image");         ctx.drawimage(image,0,0,c.width,c.height);      } </script> 

note: not entirely sure why didn't use document.getelementbyid("c"); instead of document.queryselector("#c");