Problema de escala de imagen de lienzo HTML5

html5-canvas nearest-neighbor

Question

Estoy tratando de hacer un juego temático de pixel art en un lienzo HTML5, y como parte de eso tomo imágenes de tamaño 10x20 o más y las dibujo en el lienzo con el siguiente código:

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

Sin embargo, el lienzo utiliza una escala de imagen bicúbica y, por lo tanto, las imágenes de pixel art tienen un aspecto terrible a partir de 2x. ¿Hay alguna forma de forzar que el lienzo use la escala del vecino más cercano o posiblemente use un método personalizado para escalar imágenes? Si no, ¿significa eso que las imágenes tienen que escalarse de antemano en algo como Paint.net?

Answer 1

Elija 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ás

ctx.mozImageSmoothingEnabled = false;

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

En Webkit, necesitarás

ctx.webkitImageSmoothingEnabled = false;

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

No pude encontrar información sobre el soporte de esta propiedad en otros navegadores, por lo que probablemente no la admiten.

A través de CSS:

Otra opción es usar 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}

A través de rutinas de píxeles:

Otra opción más es hacerlo usted mismo usando las rutinas de manipulación de píxeles del lienzo: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation . Eso es mucho más trabajo, sin embargo.