Imageオブジェクトの幅と高さを設定できないのはなぜですか？

Question

var canvas = document.getElementById("canvas"); 
var surface = canvas.getContext("2d"); 

//creating tile 
var box = {}; 
box.x = 0; 
box.y = 0; 
box.img = new Image(); 
box.img.src = "box_image.png"; 
box.img.height = "64"; 
box.img.width = "64"; 

console.log(box.img.width); 
//set delay to draw boxes 
setTimeout(drawBoxes, 10); 

//drawing tile 
function drawBoxes() { 
    surface.drawImage(box.img, box.x, box.y); 

} 

イメージオブジェクトの幅と高さを変更しても、イメージのサイズが変わっていないように見えます。画像は400x400の.pngですが、私は64x64のボックスにしたいと思っています。

また、drawImageのsetTimeout関数をキャンバスに配置する必要があることに気付きました。遅延がなければ、画像は表示されません。なぜこれが起こるのか説明できますか？

Answer 1

は、あなたがどこにも幅/高さの値を使用していないdrawImage

surface.drawImage(box.img, box.x, box.y, box.img.width, box.img.height);