javascript - Putting Images in html Canvas -

i not/ know how hide images in html while putting them in canvas via javascript. doing is:

in body then:

<script language="javascript" type="text/javascript">                 var c = document.getelementbyid("gamecanvas");                 var ctx = c.getcontext("2d");                 var img = document.getelementbyid("cerealbox");                 ctx.drawimage(img,400,200)              </script> 

i attempting put image in canvas haven't found way how, learning w3schools.

here's quick demo here .

var c = document.getelementbyid("gamecanvas"); var ctx = c.getcontext("2d");  var img = new image(); img.src = "http://img2.wikia.nocookie.net/__cb20081209142622/fantendo/images/e/e6/super_8_bit_mario.png";  img.onload = function () {     ctx.drawimage(img, 50, 50, 800, 600, 50, 50, 100, 60); }