Android nexus7上Firefox中的画布转换问题

这段代码在我的nexus7上的firefox17上生成下面的第一个图像。原始图像没有角度，所有线条都应该是南北向和东西向。它正确地出现在桌面上的Firefox和chrome上，以及我的nexus7上的chrome上

如果我尝试使用

var targetSize = Math.max($(window).width(), $(window).height());
var canvas = $("#canvas")[0];
canvas.setAttribute('width', $(window).width());
canvas.setAttribute('height', $(window).height());
var context = canvas.getContext("2d");

var img = new Image();   // Create new img element
img.onload = function () {
    angle = Math.PI / 4;
    context.setTransform(1, 0, 0, 1, 0, 0); //attempt to reset transform
    context.drawImage(img, 0, 0);
};
img.src = '../../Images/FloorPlans/GroundFloor.jpg'; // Set source path

我得到下面的第二个输出！我的目标平台必须是Nexus7上的FF：(

这是如何修复的？或者这是firefox的bug

---

我已经算好了

原始图像是jpg，1859px*1568px~501kb

我把它的大小缩小到50%，它就工作了！然后我回到了完整大小的图像（仍然不工作），然后一次缩小5%。所有的图像都失败了，直到我达到了原始大小的75%（1394px*1176px~342kb），效果非常好

因此，问题要么是图像大小，要么是文件大小

狩猎快乐

更新！

感谢Edward Falk在下面的评论，我们得到了一个明确的答案。是的，将图像宽度的单个像素（从而使宽度为偶数像素）完全解决了这个问题

---

Firefox canvas要求（某些？）图像的像素宽度和高度为偶数，否则可能无法正确渲染。

当我看到您的帖子时，我怀疑您的图像的像素宽度为奇数。许多图像格式要求扫描线四舍五入到两个像素的倍数（可能追溯到计算机为16位，图像数据为8位的时候）。某些软件在显示奇数宽度的图像时表现不好，填充不正确。尝试在图像编辑器中显示原始图像，使其变宽或变窄一个像素。是的！我应该从以前的D3D/OGL时代就认识到这一点：）实际上，您甚至可能会发现，在一个好的图像编辑器中打开图像并再次保存它将解决问题，因为一个好的编辑器将添加所需的扫描线填充。

        context.setTransform(1, 0, Math.tan(angle), 1, 0, 0);