After some grueling debugging, I think I have found a bug in the iPad Safari’s implementation of canvas.drawImage(). Specifically this overload:
void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
When slicing an image and scaling it down, it seems that Safari sometimes forgets to slice the image and simply scales the entire image down. This happens on a random basis, but I have been able reproduce it on the iPad consistently after clearing safari’s cache. Here is the code:
<script>
draw = function() {
var ctx = document.getElementById('cc').getContext('2d');
var timg = new Image()
timg.onload = function() {
ctx.fillStyle = 'rgb(100,100,100)';
ctx.fillRect(0,0,256,256);
ctx.drawImage(timg, 0,0, 128, 128, 0, 0, 63,63);
ctx.drawImage(timg, 0,0, 128, 128, 128, 0, 65,65);
};
timg.src = "http://amirshimoni.com/ipadbug1/1234.jpg";
};
</script>
<body onload="draw();">
<canvas id="cc" width="256" height="128"></canvas>
</body>
You can run it here or see the output from the iPad here.
This bug doesn’t seem to exist on any other browser, including desktop Safari. It also seems to go away if you refresh the page on the iPad.
Am I doing something wrong with drawImage()?
Can anyone figure out why this is happening, and if there are specific values that I could simply avoid so it doesn’t happen… or some other workaround?
This bug seems to have been fixed in iOS 4.2. At least, I don’t see it happening any more.