Hi.
I've got a problem with canvas context drawImage() method if an image is drawn on a canvas that already has not-integer scale factor. It seems that such images are clipped in a weird way (sometimes the most right part of an image is clipped, sometimes the most bottom side, sometimes both). This problem appears at least in Google Chrome 6 (at least stable), Chromium 6, perhaps even latest (dev-)builds too, and even Safari 5. Firefox has not this bug. Obviously, it's a Webkit problem if I'm not wrong. Let's look at the following code (provided entire code for a demo):
<html>
<head>
<style type="text/css">
canvas {
border: solid 1px black;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
var increase = document.getElementById("increase");
var decrease = document.getElementById("decrease");
var scale = document.getElementById("scale");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "image-3x5.png";
var scaleX = 1;
var scaleY = 1;
var repaint = function() {
scale.innerHTML = scaleX + "; " + scaleY;
context.fillStyle = "#FFF";
context.fillRect(0, 0, 1000, 750);
context.drawImage(image, 0, 0, 3, 5);
};
var scaleXF = 1.2; // change both to 2 and it will be fixed
var scaleYF = 1.2;
decrease.onclick = function() {
scaleX /= scaleXF;
scaleY /= scaleYF;
context.scale(1 / scaleXF, 1 / scaleYF);
repaint();
};
increase.onclick = function() {
scaleX *= scaleXF;
scaleY *= scaleYF;
context.scale(scaleXF, scaleYF);
repaint();
};
repaint();
};
</script>
</head>
<body>
<div>
<span id="scale"></span>
</div>
<div>
<canvas id="canvas" width="1000" height="750"></canvas>
</div>
<div>
<input id="decrease" type="button" value="decrease" />
<input id="increase" type="button" value="increase" />
</div>
</body>
</html>
So is it a real bug? Or are there any workarounds?
Thanks in advance.
UPD:
Let's consider we have the following BASE64-encoded 3x5 image:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC