HTML5 Canvas Escala de imagen Edición

Question

que estoy tratando de hacer un juego temático del arte de píxel en canvas de HTML5, y como parte de ese tomo 10x20 o más imágenes de tamaño y los dibujo en el lienzo con el siguiente código:

ctx.drawImage(image, 20, 20, 100, 200); 

Sin embargo, el lienzo utiliza escalado de imagen bicúbico y, por lo tanto, las imágenes de pixel art se ven terribles a partir de 2x. ¿Hay alguna manera de forzar al lienzo a usar la escala del vecino más cercano o posiblemente usar un método personalizado para escalar imágenes? Si no, ¿significa eso que las imágenes deben escalarse de antemano en algo como Paint.net?

Answer 1

elegir cualquiera de los siguientes:

---

a través de JavaScript:

ctx.imageSmoothingEnabled = false; 

^{Fuente: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing}

En Gecko, necesitará

ctx.mozImageSmoothingEnabled = false; 

^{Fuente: https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes}

en WebKit, tendrá

ctx.webkitImageSmoothingEnabled = false; 

^{Fuente: https://bugs.webkit.org/show_bug.cgi?id=82804}

no pude encontrar información sobre la compatibilidad de este alojamiento en otros navegadores , por lo que probablemente no lo admiten.

---

a través de CSS:

Otra opción es utilizar un conjunto de reglas CSS en el lienzo. Por ejemplo:

<canvas id="c" width="16" height="16"></canvas> 
<script> 
    var c = document.getElementById("c"), 
     cx = c.getContext("2d"), 
     im = new Image(); 
    im.src = "http://stackoverflow.com/favicon.ico"; // 16x16 
    cx.drawImage(im, 0, 0); 
</script> 
<style> 
    canvas { 
    width: 32px; 
    height: 32px; 
    image-rendering: optimizeSpeed; 
    image-rendering: crisp-edges; 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -o-crisp-edges; 
    image-rendering: -webkit-optimize-contrast; 
    -ms-interpolation-mode: nearest-neighbor; 
    } 
</style> 

^{Fuente: https://developer.mozilla.org/en/CSS/image-rendering
Fuente: https://bugs.webkit.org/show_bug.cgi?id=56627}

---

Via rutinas de píxeles:

Otra opción es hacerlo por sí mismo utilizando el lienzo rutinas de manipulación de píxeles: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation. Sin embargo, eso es mucho más trabajo.