Javascript drawImage（）在调整大小的画布上断开

我对这件事束手无策。尝试将图像绘制到HTML5画布的非常简单的基本情况。画布比图像大得多，并且大小动态变化。我打算平铺几个不同的图像，但即使使用简单的drawImage（）调用，我也无法使图像正确地显示在画布中。我将代码简化为您在下面看到的内容，但是，我的图像显示的比它应该显示的要大得多。下面，我一次只尝试drawImage，但没有效果

image = new Image();

image.onload = function() {
   canvas = document.getElementById("bigDynamicCanvas");
   context = canvas.getContext('2d');
   context.drawImage(image, 0, 0);  //Nope
   context.drawImage(image, 0, 0, image.width, image.height); //Nope
   context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);//Nope
};

image.src = "some.png";

这是在CentOS上的Firefox 24.6.0中实现的

---

编辑：如果画布与图像大小相同，并且我没有调整其大小，我可以让图像绘制正确的大小。奇怪的是，在调用上述任何一项之前，画布的大小早已调整。然后，在画布上绘图似乎有一种效果，就好像我在它的原始大小上绘图，然后再调整它的大小一样，这至少不是程序中的顺序。

我想你只是忘记了在变量前面加上

var

，因此对

image

的引用就不起作用了

小提琴：

HTML

<canvas id="bigDynamicCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"></canvas>

---

代码试图将缩放的图像平铺到调整大小的画布上。问题是所有

drawImage（）

调用都使用了与缩放画布大小相关的坐标

因此：

<canvas id="mycanvas" width=100 height=100></canvas>

然后我有了10px x 10px的瓷砖。我正在调整这些图像的大小，同时调整画布的大小。考虑到上述情况，

scale=2.0

// Does NOT work, only 5x5 tiling appears
context.drawImage(image, x*image.width*scale, x*image.height*scale, image.width * scale, image.height * scale);

原因是我对画布的“调整大小”实际上只是一种风格

<canvas id="fractalCanvas" height="100" width="100" style="width: 200px; height: 200px;"></canvas>

---

var仅用于保持变量范围的局部性。虽然我确实按照您的建议添加了var，并在全局名称空间中保留了唯一的变量，但这不是问题所在。我已经弄明白了，但现在还不太明白。

// Does NOT work, only 5x5 tiling appears
context.drawImage(image, x*image.width*scale, x*image.height*scale, image.width * scale, image.height * scale);

<canvas id="fractalCanvas" height="100" width="100" style="width: 200px; height: 200px;"></canvas>

// WORKS, 10x10 tiling @ 200px x 200px, tiles appear as 20x20
context.drawImage(image, x*image.width, x*image.height, image.width, image.height);