Javascript/Canvas/Images scaling problem in Firefox
Posted
by DocTiger
on Stack Overflow
See other posts from Stack Overflow
or by DocTiger
Published on 2009-10-10T06:35:35Z
Indexed on
2010/05/08
10:18 UTC
Read the original article
Hit count: 330
I have a problem with the context2d's drawImage function. Whenever I scale an image, it gets a dark border of one pixel, which is kind of ugly. That does only happen in Firefox, not in Opera or Webkit.
Is this an antialiasing problem? For hours I studied the examples and available documentation without getting rid of it... I couldn't yet try it on another computer so maybe just maybe it's an issue with the graphics hardware/drivers.
I have reproduced this effect with this minimal snippet, assuming exp.jpg is sized 200x200 pixels.
<html>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="text/javascript" src="../../media/pinax/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
context = $('#canvas')[0].getContext('2d');
img = new Image();
img.src = "exp.jpg";
//while (!img.complete);
context.drawImage(img, 2,2,199,199);
context.drawImage(img, 199,2,199,199);
</script>
</html>
© Stack Overflow or respective owner
