NOTA : Esto tiene que ver con cómo se representan los elementos de lienzo existentes cuando se amplía , no con cómo se representan las líneas o gráficos en una superficie de lienzo . En otras palabras, esto tiene todo que ver con la interpolación de elementos escalados , y nada que ver con antialiasing de gráficos dibujados en un lienzo. No me preocupa cómo el navegador dibuja líneas; Me importa cómo el navegador representa el elemento del lienzo en sí mismo cuando se amplía.
¿Existe una propiedad de lienzo o una configuración del navegador que pueda cambiar mediante programación para deshabilitar la interpolación al escalar <canvas>elementos? Una solución de navegador cruzado es ideal pero no esencial; Los navegadores basados en webkit son mi objetivo principal. El rendimiento es muy importante.
Esta pregunta es muy similar pero no ilustra suficientemente el problema. Por lo que vale, he tratado image-rendering: -webkit-optimize-contrasten vano.
La aplicación será un juego de estilo "retro" de 8 bits escrito en HTML5 + JS para dejar en claro lo que necesito.
Para ilustrar, aquí hay un ejemplo. ( versión en vivo )
Supongamos que tengo un lienzo de 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... que tiene CSS que hace que el elemento sea 5 veces más grande (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */Dibujo una simple 'X' en el lienzo así:
$('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();
});La imagen de la izquierda es lo que representa Chromium (14.0). La imagen de la derecha es lo que quiero (dibujado a mano con fines ilustrativos).
