javascript：キャンバスに画像を描くことはできません

Question

キャンバスに画像を読み込もうとすると、私のキャンバスはすでに作成されていますが、表示されません。 （makeGameAreaは私がキャンバスを作成するために使用したメソッドです）

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

私のコードに構文エラーはありますか？

Answer 1

私はすでにキャンバス要素がページにあり、そのIDがmyAreaであると想定しています。

JavaScriptの最初の行は意味をなさない - makeGameArea（）という関数があり、私たちに話していない場合を除いて、その方法でキャンバスを作成することはできません。

第2に、イメージをキャンバスに描画する前にロードする必要があります。

このコードを試してみてください：

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";