I would like to scale an image up with scale = 2.0. I would like do to that without any smoothing, so the desired effect is to turn each pixel of the original image into 2×2 pixels of the same colour.
I wonder if this is possible to do in Javascript/CSS in a cross-browser (>= IE7) manner without resorting to <canvas /> tag.
Sorry, I don’t believe the effect you want is possible cross-browser without a canvas.
In Firefox in Canvas you can do
ctx.mozImageSmoothingEnabled = false;but that’s as close as you’re going to get.image-rendering: -moz-crisp-edges;might help you in firefox for CSS scaling, and-ms-interpolation-mode* might help you in IE, but I doubt you’ll get a solution that looks the same across all browsers.* I think this has been deprecated/obsoleted.