HTML and CSS Reference
In-Depth Information
to hint to the browser about how to scale an image. Unfortunately that property isn't part of the CSS3 final spec and has
been moved to CSS4. However, Firefox has implemented it; others, like Chrome, haven't at the time of writing.
canvas {
image-rendering: optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
In the figures that follow,
image-rendering
is set to
optimize-contrast
, the intended value for pixel art to be
scaled properly. Figure
15-9
was done in Firefox; Figure
15-10
was done using Chrome, which does not implement the
“image-rendering” property at the time of writing.
Figure 15-9.
Our demo running in Firefox, where sprites are looking very sharp
