Image scaling in IE 11, 10, and 9 is terrible

Why are they not smoothly scaling down the image? Well because Internet Explorer simply does not support a smooth form of interpolation any more. It was indeed supported in earlier versions of Internet Explorer (version 7) by using ms-interpolation-mode. Newer versions of IE do not support this. It is a very frustrating IE issue and … Read more

d3.js Map () Auto Fit into Parent Container and Resize with Window

COMPLETE SOLUTION: Here’s the solution which will resize the map AFTER the user has released the edge of the window to resize it, and center it in the parent container. <div id=”mapContainer”></div> function draw(ht) { $(“#mapContainer”).html(“<svg id=’map’ xmlns=”” width=”100%” height=”” + ht + “”></svg>”); map =“svg”); var width = $(“svg”).parent().width(); var height = ht; … Read more

HTML5 – Canvas, drawImage() draws image blurry

The reason this is happening is because of Anti Aliasing. Simply set the imageSmoothingEnabled to false like so context.imageSmoothingEnabled = false; Here is a jsFiddle verson jsFiddle : var c = document.getElementById(‘canvas’) var ctx = c.getContext(‘2d’) var playerImg = new Image() // sees a CLEAR, CRISP image playerImg.src=”” playerImg.onload = function() { ctx.imageSmoothingEnabled … Read more

HTML5 canvas inspector?

EDIT: this answer doesn’t work on new chrome versions see: chrome canvas inspector 2015 In Chrome Canary: in your browser, enter this url chrome://flags/ enable Enable Developer Tools experiments relaunch Chrome in the developer tools, click the gear to bring up developer preferences select experiments from the menu select Canvas Inspections close devtools, refresh the … Read more