Question

I start with a large canvas where drawImage() is used to draw data from an actual image into the HTML canvas.

Later I create thumbnails of that canvas/image that are much smaller canvas elements (for performance reasons). I simply create new canvas(es) with smaller widths and heights, and again use drawImage() using the original canvas to make the thumbnail.

In many platforms the result thumbnail image looks very pixellated (PC Chrome, PC Firefox, iOS Safari) but in others such as Mac Firefox, the resize does a much better job of interpolation.

Is there any solution that can give me consistent interpolation? For example, IE has a proprietary CSS property that can be set:

object.style.msInterpolationMode = “bicubic”; 

Anything like this for other platforms? And specifically during the implicit image resize during drawImage()? Or any other creative solution is welcome

Answer 1

Sadly the short answer is that there is no built-in way. Different browsers have implemented anti-aliasing and possibly interpolation in different ways so far.

Unfortunately the spec is very permissive here:

If the original image data is a bitmap image, the value painted at a point in the destination rectangle is computed by filtering the original image data. The user agent [the browser] may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor).

Emphasis mine. In other words browsers are free to implement drawImage as they please. Unfortunate, for anyone hoping for consistency.

It’s possible to make your own algorithm using either getImageData or a large amount of calls to drawImage(), but that would be slow.