create a canvas from a css resized image, mantaining the browser interpolation on it

Question

I'm trying to draw a css resized image in a canvas (I'm using mootools, but it really doesn't matter):

var width = $('canvas').get('width');
var height = $('canvas').get('height');

$('image').set({ 'width': width, 'height': height });
$('canvas').getContext('2d').drawImage($('image'), 0, 0, width, height);​

Everything works fine in firefox, but not on webkit. The image in FF is drawn with the browser interpolation (which is good), but on webkit it's not interpolated.

Here's the fiddle http://jsfiddle.net/a2co/KyhEE/

Anyone knows how can I solve the problem? thanks

edit: i added an image to quickly show what i want to do.

Answer 1

Unfortunately this may be discrepant between browsers for some time, since the spec says that the spec doesn't care:

This specification does not define the algorithm to use when scaling the image, if necessary.

But hold on a minute: The canvas representation of your fiddle in Firefox, Webkit, Chrome and IE9 are all consistent. The only inconsistent piece that I see is how webkit scales the <img> . Here's Firefox 10, IE9 and Chrome 19 (from top to bottom):

WebKit (both chrome and Safari) is the odd one out here, and its not a Canvas thing. The <img> alone in WebKit looks different, all of the canvases look the same!

Chrome (possibly webkit) has been changing their anti-aliasing madly these past few months (very evident if you use the developer channel of chrome because it will often be broken in some way with respect to canvas drawing)

Anyway do you see something different here? Nothing looks out of the ordinary.

Edit: There's a webkit CSS property: image-rendering: -webkit-optimize-contrast which allows the image to look just as bad as the Canvas. This leads me to believe that how the Canvas looks on WebKit is an honest bug. In other words, in WebKit, its as if image-rendering: -webkit-optimize-contrast is always on for canvases, with no way to turn it off.