ericdrowell/KineticJS — pull request #488 by amw (2013-06-06 21:05:52+00:00)
Title: Fix image filtering on retina screens

Make sure you get the same pixel count in Safari/Chrome/FF - it should match
the pixel count of the image.

This bug is caused by different webkitBackingStorePixelRatio values in Safari (2) and Chrome (1).

In Chrome and FF the Kinetic's filterCanvas is upscaled to double the image resolution and getImageData called with the width and height of that canvas is returning quadruple the number of pixels. This is not right - we should have exactly the number of image pixels.

Regardless of webkitBackingStorePixelRatio value getImageData function returns the logical pixels in all of the current browsers. So when using canvas to access the image pixels we should always set the canvas size exactly to image size, draw it and then call getImageData as we do in LowDPI browsers. This commit makes sure we do exactly that.

The only downside is that in Safari we draw our image on canvas of logical size matching image dimensions and the browser unnecessarily upscales it in the backing store. Unfortunately we cannot draw it on a canvas half the size of the image to improve filtering performance, because we don't have access to the backing store pixel values – there is no backing store equivalent of getImageData.