HTML5 canvas scaling issue on iOS platforms

Question

I've been developing a project in phonegap, attempting to build for Android and iOS. The main idea is to access a saved picture on the phone library, save that picture to an HTML img element, and then draw that img element onto a canvas. From there, the user can scale and rotate the image.

I've had no issues on the Android. I've tested using emulators and devices, and have tested a wide array of devices (different pixel ratios, densities, etc.) and the resulting canvas transformations always give the expected result.

The iOS version, on the other hand, has not been as successful. Scaling/Rotating the canvas looks fine, until I scale the canvas slightly larger than its original size (about 4-5 pixels larger than original). After scaling the canvas up in size, the image drawn on the canvas changes. Instead of now seeing the entire image displayed, I usually get a small portion of the image (usually the top-left corner) drawn over the entire canvas.

My canvas in html:

<canvas id="sourceImgCanvas" width="200" height="200" style="z-index:1; position:absolute; left:5%; top:100px;"></canvas>

The image I receive from the phone library is almost always too large for the phone screen. I scale the image down and record the ratio by which I shrank the image (drawRatio is 1 if no scaling occured, greater than 1 if image was shrank to fit screen). PhoneGap handles grabbing the picture from the phone library, and I simply use the imageURI returned from the photo and set it to an img element Phonegap Camera API:

// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) 
{
    sourceImage = document.getElementById('sourceImg');
    sourceImage.src = imageURI;

    //signal that user can manipulate photo with touch inputs
    b_editPhotoAllowed = true;
}

To scale the canvas, I have an arrow on the bottom-right corner of the canvas. Upon being dragged, it records how far away it is from the top-left corner of the canvas and sets the canvas height/width based on the distance.

//Calls when user is dragging the arrow resize button.  Updates the source image size
function ResizeSourceImage() {
    var horizontalDistanceFromTopLeft = parseFloat(ovalCanvas.style.left) + ovalCanvas.width - endX;
    var verticalDistanceFromTopLeft = parseFloat(ovalCanvas.style.top) + ovalCanvas.height - endY;

    //update canvas size with new length
    sourceImgCanvas.width = originalSrcImgWidth - horizontalDistanceFromTopLeft;
    sourceImgCanvas.height = originalSrcImgHeight - verticalDistanceFromTopLeft;

    //re-draw based on new size
    sourceImgContext.drawImage(sourceImg, 0, 0, pictureWidth * drawRatio * drawRatioMod, pictureHeight * drawRatio * drawRatioMod, 0, 0, sourceImgCanvas.width, sourceImgCanvas.height);
}

The above drawRatio is the ratio I store upon re-sizing an image (code not shown here; it's rather long, but simple.)

The drawRatioMod is a value I set while experimenting, and is the main focus of my question. On Android, I set drawRatioMod = 1 so that drawing is not affected. On iPhone4/iPad (the devices I have available to test with), I set drawRatioMod = 0.5. This solved some initial issues I was experiencing with the html5 canvas on the iOS: since the iPhone4's resolution is actually twice it's screen size, I reduced the length/width of the source image to be drawn by half.

The above ResizeSourceImage() function is called everytime the user moves the resize arrow tool, thus updating the canvas size. The image adjusts properly to the new canvas size only if I scale down. If I scale the canvas up more than about 5-6 pixels, the canvas no longer draws the entire source image; instead, the canvas draws only the top-left corner of the image over the entire canvas.

I've been tackling this issue for a few days and have had no luck. I initially thought it had something to do with the device pixel ratio (accessible thru Javascript window.devicePixelRatio) but I've tested on several Android devices of varying ratios and have never had this result.

I feel like I'm very close to solving, as the image only displays incorrectly when scaling up on the iOS. Any pointers/tips are greatly appreciated! I've tried several fixes related to window.devicePixelRatio but my iPad's iPhone4 simulator always returns a pixelRatio of 1 (which seems incorrect) and I've had no luck with such fixes.

Cheers! (I attempted to post the bare-bones code dealing with the scaling and drawing of the canvas. If you would like to see additional code, I can post more; was hoping to have a post that didn't resemble the great wall of China :) )

Jared Sheets Jared Sheets · Accepted Answer · 2011-07-08T15:48:24

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.

HTML5 canvas scaling issue on iOS platforms

1 Answers