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?

enter image description here

gingerbreadboy · Accepted Answer · 2013-01-05T18:55:25.537

0

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.

edited Jan 05 '13 at 18:55

answered Jan 05 '13 at 17:51

gingerbreadboy

7,386
5
36
62

2

I suspected that your image had an odd pixel width when I saw your post. Many image formats require that scanlines be rounded up to a multiple of two pixels (probably a throwback to when computers were 16 bits and image data was 8 bits). Some software behaves badly when presented with an odd-width image with incorrect padding. Trying bringing your original image up in an image editor, and making it one pixel wider or narrower. – Edward Falk Jan 05 '13 at 18:04
YES! I should have recognised this from my old D3D/OGL days :) – gingerbreadboy Jan 05 '13 at 18:57
1

Actually, you may even find that bringing the image up in a good image editor and just saving it again will fix the problem, as a good editor will add the required scanline padding. – Edward Falk Jan 05 '13 at 19:27

Canvas transform issue in Firefox on nexus7

1 Answers1