在html5画布上绘制图像

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

有什么想法吗

谢谢编辑，因为我是一个noob（幸运的缓存命中率）：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var marthPic=新图像（）；
marthPic.src='images/marth.jpg'；
marthPic.onload=函数（）{
ctx.drawImage（marthPic，10,10）；
};

因为我是一个noob（幸运的缓存命中率）而编辑：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var marthPic=新图像（）；
marthPic.src='images/marth.jpg'；
marthPic.onload=函数（）{
ctx.drawImage（marthPic，10,10）；
};

在将图像添加到画布之前，需要等待图像实际加载。您可以使用

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

---

在将图像添加到画布之前，需要等待图像实际加载。您可以使用

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