Take the 2-minute tour ×

Our application loads a PNG-image via JavaScript and draws it to the 2D-context of a canvas-element in order to read the exact color values of the pixels (using getImageData).

This works fine in all browsers that support the canvas-API, except in IE9: ctx.drawImage(img, 0, 0) seems to apply some kind of anti-aliasing to the image. Is it possible to disable this behavior?

Our code kind of looks like this:

var img = document.createElement('IMG');
img.addEventListener('load', function(e) {
    var w = img.width,
        h = img.height,
        ctx = canvas.getContext('2d');

    ctx.drawImage(img, 0, 0);
    var data = ctx.getImageData(0, 0, w, h),
        pixels = data.data;

    for (var y = 0, i = 0; y < h; y++) {
        for (var x = 0; x < w; x++, i += 4) {
            var r = pixels[i],
                g = pixels[i+1],
                b = pixels[i+2],
                color = (r << 16) | (g << 8) | b;

            // do something with x, y and color
img.src = 'images/source.png';
share|improve this question
Duplicate of Can I turn off antialiasing on an HTML <canvas> element?. (The answer is, "No, you cannot.") However, there should be no anti-aliasing if you are not attempting to rescale the image during the draw. Create a reproducible test-case showing the problem in IE9 and you have yourself a valid question. –  Phrogz Mar 30 '11 at 17:49
add comment

1 Answer

The approach to improve the crispness of lines depends on whether or not you are filling or drawing...see http://www.netmagazine.com/features/four-essential-html5-canvas-tips for approaches to each.

share|improve this answer
add comment

Your Answer


