759172 - drawImage outputs grainy image when context is scaled with scale 0.33 or less

Status: RESOLVED WONTFIX

(Core :: Graphics: Canvas2D, defect)

Description

[Yury Delendik (:yury)]

Attachment: Sample of the image and its scaling

Too many details of the original image lost if the context is scaled with scale 0.5 or less. Per MDN ( https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2 ):

"Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible."

Is this behavior normal? If yes, is it described in the canvas 2d context specification?

Comment 1

[Yury Delendik (:yury)]

correction: with scale 0.33 or less

Comment 2

[Boris Zbarsky [:bzbarsky]]

The canvas 2d spec does not define scaling behavior at all.

But in general, downscaling line art of the sort you have there will be very lossy, yes: computer screens can't draw fractional pixels.  I doubt that has anything to do with canvas.

I just tested three other canvas implementations (Chrome, Safari, Opera), and they all behave similarly, unsurprisingly.

Comment 3

[Jeff Muizelaar [:jrmuizel]]

All browsers have switched to bilinear scaling for canvas images for performance. This means each destination pixel is constructed from an interpolation of the 4 nearest source pixels and thus when the scale is such that pixels are skipped the quality suffers.

If you need to work around this I'd suggest constructing a mipmap tree for the image, by essentially recursively scaling down in half. Then when you go to draw the image you can choose the mipmap level that is closest to the desired scale. This should give you quality closer to what you expect.

Comment 4

[Robert Longson [:longsonr]]

You can turn it off by setting ctx.mozImageSmoothingEnabled = false;

Comment 5

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

That would just drop you to nearest neighbour which would be even worse, no?

The mipmap approach that jeff suggested is likely the best if you need performance; alternatively, you could implement your own image scaling using get/putImageData that uses higher quality interpolation.