NOTE: This has to do with how existing canvas elements are rendered when scaled up, not to do with how lines or graphics are rendered onto a canvas surface. In other words, this has everything to do with interpolation of scaled elements, and nothing to do with antialiasing of graphics being drawn on a canvas. I'm not concerned with how the browser draws lines; I care about how the browser renders the canvas element itself when it is scaled up.
Is there a canvas property or browser setting I can change programmatically to disable interpolation when scaling <canvas> elements? A cross-browser solution is ideal but not essential; Webkit-based browsers are my main target. Performance is very important.
This question is most similar but does not illustrate the problem sufficiently. For what it's worth, I have tried image-rendering: -webkit-optimize-contrast to no avail.
The application will be a retro 8-bit styled game written in HTML5+JS to make it clear what I need.
To illustrate, here is an example. (live version)
Suppose I have a 21x21 canvas...
<canvas id='b' width='21' height='21'></canvas>
...which has css that makes the element 5 times larger (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
I draw a simple 'X' on the canvas like so:
$('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();
});
The image on the left is what Chromium (14.0) renders. The image on the right is what I want (hand-drawn for illustrative purposes).
