Menu
Is there a canvas property or browser setting I can change programmatically to disable interpolation when scaling elements?
The answer is maybe some day. For now, you'll have to resort to hack-arounds to get what you want.
image-renderingThe working draft of CSS3 outlines a new property, image-rendering that should do what I want:
The image-rendering property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.
The specification outlines three accepted values: auto, crisp-edges, and pixelated.
pixelated:
When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be simply composed of very large pixels. When scaling down, this is the same as auto.
Since this is merely a working draft, there's no guarantee that this will become standard. Browser support is currently spotty, at best.
The Mozilla Developer Network has a pretty thorough page dedicated to the current state of the art which I highly recommend reading.
The Webkit developers initially chose to tentatively implement this as -webkit-optimize-contrast, but Chromium/Chrome don't seem to be using a version of Webkit that implements this.
Update: 2014-09-12
Chrome 38 now supports image-rendering: pixelated!
Firefox has a bug report open to get image-rendering: pixelated implemented, but -moz-crisp-edges works for now.
The most cross-platform, CSS-only solution so far is thus:
canvas {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
Sadly this wont work on all major HTML5 platforms yet (Chrome, in particular).
Of course, one could manually scale up images using nearest-neighbor interpolation onto high-resolution canvas surfaces in javascript, or even pre-scale images server-side, but in my case this will be forbiddingly costly so it is not a viable option.
ImpactJS uses a texture pre-scaling technique to get around all this FUD. Impact's developer, Dominic Szablewski, wrote a very in-depth article about this (he even ended up citing this question in his research).
See Simon's answer for a canvas-based solution that relies on the imageSmoothingEnabled property (not available in older browsers, but simpler than pre-scaling and pretty widely-supported).
If you'd like to test the CSS properties discussed in the MDN article on canvas elements, I've made this fiddle which should display something like this, blurry or not, depending on your browser:
New answer 7/31/2012
This is finally in the canvas spec!
The specification has recently added a property called imageSmoothingEnabled, which defaults to true and determines if images drawn on non-integer coordinates or drawn scaled will use a smoother algorithm. If it is set to false then nearest-neighbor is used, producing a less smooth image and instead just making larger looking pixels.
Image smoothing has only recently been added to the canvas specification and isn’t supported by all browsers, but some browsers have implemented vendor-prefixed versions of this property. On the context there exists mozImageSmoothingEnabled in Firefox and webkitImageSmoothingEnabled in Chrome and Safari, and setting these to false will stop anti-aliasing from occurring. Unfortunately, at the time of writing, IE9 and Opera have not implemented this property, vendor prefixed or otherwise.
Preview: JSFiddle
Result:
Edit 7/31/2012 - This functionality is now in the canvas spec! See separate answer here:
https://stackoverflow.com/a/11751817/154112
Old answer is below for posterity.
Depending on your desired effect, you have this as one option:
var can = document.getElementById('b');
var ctx = can.getContext('2d');
ctx.scale(5,5);
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});
http://jsfiddle.net/wa95p/
Which creates this:
Probably not what you want. But if you were merely looking to have zero blur then that would be the ticket so I'll offer it just in case.
A more difficult option is to use pixel manipulation and write an algorithm yourself for the job. Each pixel of the first image becomes a 5x5 block of pixels on the new image. It wouldn't be too hard to do with imagedata.
But Canvas and CSS alone won't help you here for scaling one to the other with the exact effect you desire.
In google chrome, canvas image patterns aren't interpolated.
Here is a working example edited from the namuol answer http://jsfiddle.net/pGs4f/
ctx.scale(4, 4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, 64, 64);
Saviski's workaround explicated here is promising, because it works on:
But not works in the following, but the same effect can be achieved using CSS image-rendering:
The problematic are these, because ctx.XXXImageSmoothingEnabled is not working and image-rendering is not working:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With