javascript - Nearest-neighbor interpolation in canvas (internet explorer 9) -

i've created simple image viewer (with grid , image) canvas (the image only) , svg-gridlines d3.js (simliar this). use zoom-function d3.js zoom , pan image/gridlines.

my image on canvas should use nearest-neighbor interpolation. i've set many style elements achieve goal. chrome , firefox works well, have problems internet explorer 9 (i need support ie9). in ie9 image blurred.

does internet explorer 9 repect nearest-neighbor interpolation canvas?

are 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) css

   img {              image-rendering: optimizespeed;                          image-rendering: -moz-crisp-edges;          // firefox             image-rendering: -o-crisp-edges;            // opera             image-rendering: -webkit-optimize-contrast; // chrome (and safari)             image-rendering: pixelated;                 // chrome             image-rendering: optimize-contrast;         // css3 proposed             -ms-interpolation-mode: nearest-neighbor;   // ie8+         } 

this draw function

function drawimage(canvas2: any) {         var context = canvas.node().getcontext("2d");         var image = context.createimagedata(dx, dy);          (var y = 0, p = -1; y < dy; ++y) {             (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();     } 

see notes on compatibility on mdn's image-rendering page (emphasis mine)

[1] internet explorer 7 , 8 supports non-standard -ms-interpolation-mode property 2 values (bicubic , nearest-neighbor):

applies images (jpg, gif, png, ...)

in ie7 images without transparency

does not inherit

default value ie7: nearest-neighbor (low quality)

default value ie8: bicubic (high quality)

obsolete of ie9

so looks answer no, ie9 doesn't support it.