javascript：我无法在画布上绘制图像

Question

I already create my canvas on my page, however when I try to import an image on the canvas, it does not appear, here are the code I used. (the makeGameArea is a method I used to create a canvas)

var myGameArea = makeGameArea(700, 600, "myArea", "white");
var myContext = myGameArea.getContext("2d");

var myImage = new Image();
myImage.src = "sonic.gif";
myContext.drawImage(myImage, 100, 100, 100, 100);

Is there any syntax error in my code?

Answer 1

I am assuming you already have a canvas element on the page and that it has the id myArea.

Your first line of javascript just does not make sense - unless you have a function called makeGameArea() which you haven't told us about, you cannot create a canvas in that in way.

Secondly you must load the image before you can draw it on the canvas.

Try this code out:

var myGameArea = document.getElementById("myArea"); 
var myContext = myGameArea.getContext("2d");

myGameArea.width = 700;
myGameArea.height = 600;

var myImage = new Image();

myImage.onload = function() {

    myContext.drawImage(myImage, 100, 100, 100, 100);

}

myImage.src = "sonic.gif";