views:

548

answers:

1

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>
A: 

This is a known Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=490997 It seems to be a X11/driver issue.

gpothier