|
- |
- |
-
| original size | -4x size | -4x size (scaled with an image editor) | -
| none | -vendor's algorithm | -- nearest-neighbor algorithm - | -
+```
+
+```css
+img {
+ width: 48px;
+ height: 136px;
+}
+```
+
+
+
+But as you can see in the image above, the browser's default scaling algorithm makes the image look blurry. This is because it uses a smoothing algorithm that averages the colors of pixels to create a smooth transition between them.
+
+To fix this, we can use the CSS property {{cssxref("image-rendering")}} to tell the browser to use a different scaling algorithm that preserves the hard edges of pixel art.
-## An example
+```html
+
+```
+
+```css
+img {
+ width: 48px;
+ height: 136px;
+ image-rendering: pixelated;
+}
+```
+
+
+
+There are also the `crisp-edges` and `-webkit-optimize-contrast` values that work on some browsers. Check out the {{cssxref("image-rendering")}} article for more information on the differences between these values, and which values to use depending on the browser.
+
+`image-rendering: pixelated` is not without its problems as a crisp-edge-preservation technique. When CSS pixels don't align with device pixels (if the {{domxref("Window/devicePixelRatio", "devicePixelRatio")}} is not an integer), certain pixels may be drawn larger than others, resulting in a non-uniform appearance. For example, in Chrome and Firefox, when you zoom in or out, the `devicePixelRatio` changes. This can cause the pixel art to appear distorted or uneven. The screenshot below is taken at 110% page zoom in Chrome. If you look closely, you can see that the left edge of the character's face and leg appears uneven.
+
+
+
+This is not an easy problem to solve, however, because it is impossible to fill device pixels precisely when the CSS pixels cannot accurately map to them.
+
+## Crisp pixel art in canvas
+
+Many games render inside a {{htmlelement("canvas")}} element, which can use the same `image-rendering` technique because canvases are also raster images. The steps to achieve this are:
+
+- Create a {{htmlelement("canvas")}} element and set its `width` and `height` attributes to the original, smaller resolution.
+- Set its CSS {{cssxref("width")}} and {{cssxref("height")}} properties to be any value you want, but stretched equally to preserve the aspect ratio. If the canvas was created with a 128 pixel width, for example, we would set the CSS `width` to `512px` if we wanted a 4x scale.
+- Set the {{htmlelement("canvas")}} element's `image-rendering` CSS property to `pixelated`.
Let's have a look at an example. The original image we want to upscale looks like this:
@@ -85,7 +114,144 @@ image.src = "cat.png";
This code used together produces the following result:
-{{ EmbedLiveSample('An_example', '100%', 520) }}
+{{EmbedLiveSample("Crisp pixel art in canvas", "", 520)}}
> [!NOTE]
> Canvas content is not accessible to screen readers. Include descriptive text as the value of the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute directly on the canvas element itself or include fallback content placed within the opening and closing canvas tag. Canvas content is not part of the DOM, but nested fallback content is.
+
+## Arbitrarily scaling images in canvas
+
+For the character example with a plain `
+
+Previously, we said that `image-rendering: pixelated` works at the stage of mapping image pixels to CSS pixels. But if we are drawing the image into a canvas, we have two layers of mapping: from image pixels to canvas pixels, and then from canvas pixels to CSS pixels. The second step works the same way as image scaling with `