Q: Nearest-neighbor interpolation in canvas (internet explorer 9) i've created a simple image viewer (with grid and image) with an canvas (the image only) and some svg-gridlines thanks to d3.js (simliar to this). I use the zoom-function from d3.js to zoom and pan my image/gridlines.
My image on the canvas should use the Nearest-neighbor interpolation. I've set many style elements to achieve this goal. Chrome and Firefox works well, but i have problems with the Internet Explorer 9 (i need to support ie9). In IE9 the image is always blurred.
Does the internet explorer 9 repect the Nearest-neighbor interpolation for the canvas?
Are my settings correct?
My canvas code in d3.js:
canvas
        .attr("width", dx)
        .attr("height", dy)
        .attr("style", "outline: thin solid black;")
        .style("width", width + "px")
        .style("height", height + "px")
        .style("transform", "translate(" + marginleft + "px,0)")
        .style("image-rendering","-moz-crisp-edges")
        .style("image-rendering","-o-crisp-edges")
        .style("image-rendering","-webkit-optimize-contrast")
        .style("image-rendering","optimize-contrast")
        .style("image-rendering","pixelated")
        .style("-ms-interpolation-mode","nearest-neighbor")
        .call(drawImage);

this d3.js code should represent (mostly) this css
   img { 
            image-rendering: optimizeSpeed;             
            image-rendering: -moz-crisp-edges;          // Firefox
            image-rendering: -o-crisp-edges;            // Opera
            image-rendering: -webkit-optimize-contrast; // Chrome (and eventually Safari)
            image-rendering: pixelated;                 // Chrome
            image-rendering: optimize-contrast;         // CSS3 Proposed
            -ms-interpolation-mode: nearest-neighbor;   // IE8+
        }

this is my draw function
function drawImage(canvas2: any) {
        var context = canvas.node().getContext("2d");
        var image = context.createImageData(dx, dy);

        for (var y = 0, p = -1; y < dy; ++y) {
            for (var x = 0; x < dx; ++x) {
                let pixval = heatmap[y][x];                                     
                var c = d3.rgb(color(pixval));
                if(pixval <= min){
                    c = d3.rgb(255,255,255);    
                }
                image.data[++p] = c.r;
                image.data[++p] = c.g;
                image.data[++p] = c.b;
                image.data[++p] = 255;
            }
        }

        context.mozImageSmoothingEnabled = false;
        context.ImageSmoothingEnabled = false; //context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        context.putImageData(image, 0, 0);
        imageObj.src = canvas.node().toDataURL();
    }


A: See the notes on compatibility on MDN's image-rendering page
 (emphasis mine)

[1] Internet Explorer 7 and 8 supports the non-standard -ms-interpolation-mode property with two values (bicubic and nearest-neighbor):
applies only to images (JPG, GIF, PNG, ...)
in IE7 only for images without transparency
does not inherit
default value IE7: nearest-neighbor (low quality)
default value IE8: bicubic (high quality)
obsolete as of IE9

So looks like the answer is no, IE9 doesn't support it.
