javascript - d3 putimagedata cannot turn off smoothing -


somehow cannot turn off smoothing on image drawn on canvas using d3.js. tried disable imagesmoothingenabled in context. mistake? thank solving issue. thomas

<!doctype html> <meta charset="utf-8"> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script>     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 not fire             context.mozimagesmoothingenabled = false;             context.webkitimagesmoothingenabled = false;             context.msimagesmoothingenabled = false;             var image = context.createimagedata(dx, dy);              (var y = 0, p = -1; y < dy; ++y) {                 (var x = 0; x < 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);         } </script> 


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -