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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@lnanek Hmm, interesting... thanks for the data point! I was also pointed to this by Paul Irish: http://stackoverflow.com/questions/2303690