Html5 Canvas Drawimage Ratio Bug Ios

HTML5 Canvas drawImage ratio bug iOS

There is a JavaScript canvas resize library which works around the subsampling and vertical squash issues encountered when drawing scaled images on canvas on iOS devices:
http://github.com/stomita/ios-imagefile-megapixel

There are side issues when scaling images with alpha channel (as it uses the alpha channel for the issues detection) and when trying to resize existing canvas elements, however it's the first solution I've found that actually works with the issue at hand.

stomita is also a StackOverflow user and posted his solution here:
https://stackoverflow.com/a/12615436/644048

HTML5 canvas scaling issue on iOS platforms

After testing this for a few days, I've finally found the culprit: using myContext.drawImage() to slice an image is just a big pain in iOS (perhaps due to the retina display, but I'm not 100% sure).

What I did instead was a combination of double buffering and using myContext.drawImage() to only scale, not slice.

FelineSoft has a great post on several things canvas related. Double buffering is explained here: http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/

So, instead of slicing the original image like so:

sourceImgContext.drawImage(sourceImg, 0, 0, pictureWidth * drawRatio * drawRatioMod, pictureHeight * drawRatio * drawRatioMod, 0, 0, sourceImgCanvas.width, sourceImgCanvas.height);

I instead draw the image to a buffer and then draw that to the canvas the user sees on screen. Looking back, the buffer may not be necessary to fix this scaling issue I had, but it's a good habit to get used to:

//buffer to draw the image to before drawing on-screen
var bufferCanvas = document.createElement('canvas');
var bufferContext = bufferCanvas.getContext('2d');

bufferContext.drawImage(sourceImg, 0, 0, bufferCanvas.width, bufferCanvas.height);

//later, I draw the image stored in buffer to a canvas user will see on-screen
//if this call is coming right after the command to draw image to buffer, would be best
//to add a check to make sure buffer has finished drawing image.
sourceImgContext.drawImage(bufferCanvas, 0, 0, sourceImgCanvas.width, sourceImgCanvas.height);

As you can see, I no longer use canvas.drawImage() to slice the source image, I simply scale it to fit the canvas.

Seems I was going about it the wrong way, but hopefully anyone else experiencing similar issues will find this method helpful.

Webkit canvas drawImage() and canvas not-integer scale factor bug?

You're right, it's a bug.

The difference between

context.setTransform(1*55.206143891243606, 0, 0, 1*55.206143891243606, 0, 0);

and

context.setTransform(1*55, 0, 0, 1*55, 0, 0);

Is massive. But only when drawing images. When filling a rectangle it works correctly.

I did a bit of testing and made this page to illustrate. The top two are with drawImage and a scale factor of 55 and 55.206143891243606. They clearly look very different.

Below are two more canvases with the same respective scale factors and a fillRect command. They look fine.

http://simonsarris.com/misc/badscale.html

This should be reported to the chromium issue tracker. Let me know if you want to do it, otherwise I will do it.

Good catch, by the way :D

---

Related Topics