[whatwg] Bicubic filtering on context.drawImage

Ian Hickson ian at hixie.ch
Fri Mar 14 11:29:52 PDT 2014

On Mon, 9 Dec 2013, Tingan Ho wrote:
> I'm a web developer in need of bicubic filtering on context.drawImage. I 
> use to crop and scale images on the web using canvas. And I noticed that 
> quality when you scale down very much is very bad on canvas.

Do you need bicubic filtering specifically, or would any high quality 
resizing algorithm work for you?

> I scale down images using context.drawImage. There is no way for me to 
> opt in for which filter method to use. I thought it was a bug first, 
> because I thought context.webkitImageSmoothingEnabled did the job. But 
> it didn't. So I filed a bug for chrome. But they suggested me to email 
> you guys.
> https://code.google.com/p/chromium/issues/detail?id=326640

If the bug is that Chrome resamples the image in an ugly way, then that's 
a bug with Chrome. As the bug says, browsers are allowed to pick whatever 
algorithm they want -- it's a quality-of-implementation issue. But if the 
result is ugly, that's a low quality implementation.

On Mon, 9 Dec 2013, Tingan Ho wrote:
> [...] it kind of make sense if you set imageSmothingEnabled to true in 
> the context object, that all down-scaling should use bicubic 
> resampling(I haven't tried yet, but I think the scale use bicubic 
> sampling). I think it is is a miss in the specification that the method 
> drawImage doesn't use bicubic resampling. It is a method of the context 
> objext on des down-scaling.

Well, when scaling down, nearest-neighbor interpolation doesn't make 
sense. So the "false" value doesn't really make sense when scaling down. 
So browsers have to pick an algorithm. Which they pick (and how it's 
implemented, etc) decides the quality of their implementation.

On Mon, 9 Dec 2013, Oliver Hunt wrote:
> I’m not sure why you have a bias towards bicubic filtering as there are 
> many different scaling filters that can be used.
> Lanczos is better than bicubic in many (most?) cases.  Spline scaling 
> can also do a good job, as can fractal interpolation.
> There are even specific scaling systems like Sal which are designed for 
> upscaling sprites, and do a better job at the specific task than 
> anything else (IIRC this is frequently used by the various old console 
> emulators)

This is why the spec currently doesn't specify an algorithm.

On Mon, 9 Dec 2013, Tingan Ho wrote:
> That would be even better. At least if I can opt-in for the one I want. 
> But I think most developers also don't want to dive into this 
> algorithms, so it would be good to have default values that perform 
> well. right now I don't know exactly what all browser vendors are using, 
> maybe bilinear? But it result in very poor image quality.

That's a quality-of-implementation bug with the browsers, not a spec bug.

Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

More information about the whatwg mailing list