Canvas transform issue in Firefox on nexus7

Question

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

This code produces the first image below on firefox17 on my nexus7. The original image is NOT angled, all of the lines should be north-south and east-west. It appears correctly on Firefox and chrome on the desktop, and chrome on my nexus7.

If i try to "un-skewer" the image using...

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

I get the second output below! My target platform has to be FF on the Nexus7 :(

How can this be fixed? Or is this a firefox bug?

Answer 1

I've kinda worked it out.

The original image was a jpg, 1859px * 1568px ~ 501kb.

I resized it down to 50% and it worked! I then went back to the full size image (still not working) before resizing down 5% at a time. All of the images failed until I got to 75% of the original size (1394px * 1176px ~ 342kb) which worked perfectly!

So, the issue is either one of image size or file size.

Happy hunting!

UPDATE!

Thanks to Edward Falk's comment below, we have a definitive answer. Yes, shaving a single pixel of of the width of the image (thus making the width an even number of pixels) fixed the problem entirely.

Firefox canvas requires (some?) images to have an even pixel width and height, otherwise they may render incorrectly.