Created
April 6, 2011 01:45
-
-
Save romannurik/904977 to your computer and use it in GitHub Desktop.
For some reason, Canvas.drawImage, with scaling, doesn't result in good anti-aliasing (ideally bicubic resampling) in browsers on Windows and Linux. On Mac, it looks great. Can this be fixed?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| /* doesn't work */ | |
| img, canvas { | |
| image-rendering: optimizeQuality; | |
| } | |
| </style> | |
| </head> | |
| <script> | |
| function onload() { | |
| var img = document.getElementsByTagName('img')[0]; | |
| var canvas = document.getElementsByTagName('canvas')[0]; | |
| var ctx = canvas.getContext('2d'); | |
| ctx.drawImage(img, 0, 0, 300, 300, 0, 0, 50, 50); | |
| } | |
| </script> | |
| <body onload="onload()"> | |
| <img src="http://www.droiddog.com/wp-content/uploads/2011/04/google-icon.png"> | |
| <canvas width="50" height="50"> | |
| </body> | |
| </html> |
@lnanek Hmm, interesting... thanks for the data point! I was also pointed to this by Paul Irish: http://stackoverflow.com/questions/2303690
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If I size up the canvas by it's attributes, then size down by CSS, it looks considerably better on Chrome on Windows. New version on right:
http://i.imgur.com/8YbqV.png
https://gist.github.com/905029
Although I am scaling up with the browser too. 50x50 pixels was too small for me to see scaling differences easily without that. Although I guess I could have screen captured and examined in a graphics program.
Anyway, just reporting a neat difference I noticed while playing with the problem!