Edit Question - KnowledgeHub

Title Body

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 t

Tags (comma-separated) Cancel