title: d3 putimagedata cannot turn off smoothing
body: <p>somehow I cannot turn off smoothing on my image drawn on my canvas using d3.js.  I tried to disable imageSmoothingEnabled in my context. What is my mistake? 
  Thank you very much for any help solving my issue. 
      Thomas</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;body&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var width = 500,
          height = 200;
      heatmap=
      [
          [200,104,104,105, 80,106,106,106,107,170],
          [104,104,105,105,106,106,107,107,107,107],
          [104,105,105,106,106,107,107,128,138,148]
      ];
  
      var dx = heatmap[0].length,
          dy = heatmap.length;
  
          var x = d3.scale.linear()
                  .domain([0, dx])
                  .range([0, width]);
  
          var y = d3.scale.linear()
                  .domain([0, dy])
                  .range([height, 0]);
  
          var color = d3.scale.linear()
                  .domain([5, 115, 135, 155, 175, 295])
                  .range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]);
  
  
          d3.select("body").append("canvas")
                  .attr("width", dx)
                  .attr("height", dy)
                  .style("width", width + "px")
                  .style("height", height + "px")
                  .call(drawImage);
  
          var svg = d3.select("body").append("svg")
                  .attr("width", width)
                  .attr("height", height);
  
          svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis)
                  .call(removeZero);
  
          svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                  .call(removeZero);
  
          function drawImage(canvas) {
              var context = canvas.node().getContext("2d");
              context.imageSmoothingEnabled = false; //seems to not fire
              context.mozImageSmoothingEnabled = false;
              context.webkitImageSmoothingEnabled = false;
              context.msImageSmoothingEnabled = false;
              var image = context.createImageData(dx, dy);
  
              for (var y = 0, p = -1; y &lt; dy; ++y) {
                  for (var x = 0; x &lt; dx; ++x) {
                      var c = d3.rgb(color(heatmap[y][x]));
                      image.data[++p] = c.r;
                      image.data[++p] = c.g;
                      image.data[++p] = c.b;
                      image.data[++p] = 255;
                  }
              }
              context.putImageData(image, 0, 0);
          }
  &lt;/script&gt;
  </code></pre>