I have a problem with the drawImage () method in a canvas context if the image is drawn on a canvas that no longer has an integer scale factor. It seems that such images are cropped in a strange way (sometimes the rightmost part of the image is cropped, sometimes the very bottom side, sometimes both). This problem appears, at least in Google Chrome 6 (at least stable), Chromium 6, possibly even in the latest (dev-) builds, and even Safari 5. Firefox does not have this error. Obviously this is a Webkit problem, if I'm not mistaken. Let's look at the following code (provided all the code for demonstration):
<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;
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 what is the real mistake? Or are there any workarounds?
Thanks in advance.
UPD:
, 3- BASE64-:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC