рисование изображения на холсте html5

Question

Я довольно новичок в js и только сделал немного html, но это похоже на то, что было бы просто: я просто пытаюсь нарисовать изображение на холсте! Если добавить новое изображение в мой основной div (gameObjectElement), он отлично работает, но при попытке нарисовать его на холсте он не отображается. Текст заливки появляется на холсте, поэтому я считаю, что материал контекста правильный.

 var marthPic = new Image(); 
     marthPic.src ='images/marth.jpg'; 

     $(gameObjectElement).append(marthPic); 

     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     ctx.font="30px Arial"; 
     ctx.fillText("Hello World",300,50); 
     ctx.drawImage(marthPic, 100, 100); 

Любые идеи?

благодаря

Answer 1

Вы должны ждать изображения, чтобы фактически быть загружен, прежде чем добавить его на холст. Вы можете сделать это с помощью обработчика onload:

var marthPic = new Image(); 
marthPic.src ='images/marth.jpg'; 
$(gameObjectElement).append(marthPic); 

marthPic.onload = function() { 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.fillText("Hello World",300,50); 
    ctx.drawImage(marthPic, 100, 100); 
}; 

Answer 2

Под редакцией, потому что я нуб (повез кэш):

<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 

    var marthPic = new Image(); 
    marthPic.src = 'images/marth.jpg'; 
    marthPic.onload = function() { 
     ctx.drawImage(marthPic,10,10); 
    }; 

</script>