HTML and CSS Reference
In-Depth Information
To make this work, you must be in vendor prefix land for a while, and Microsoft is still going its own way
with a
-ms-interpolation-mode
property, but the following CSS style should future-proof you for when
WebKit adds support:
canvas {
image-rendering: -moz-crisp-edges; /* Firefox 6.0+ */
image-rendering: -webkit-optimize-contrast;/* Webkit */
image-rendering: optimize-contrast; /* Standards compliant
*/
-ms-interpolation-mode: nearest-neighbor; /* MS Specific
extension*/
}
Figure 15-2
shows how this looks in Firefox 11; the edges are crisper.
Figure 15-2:
Resized Canvas with crisp edges.
As discussed in Chapter 6, “Being a Good Mobile Citizen,” CSS pixels don't correspond to display pixels
on high-resolution devices such as the iPhone 4, iPad 3, and Galaxy Nexus. This means that if you leave the
canvas element at its default resolution without setting a CSS width, you wouldn't be using the display to its
best capability. This means that text drawn on the canvas element, for example, won't be crisp.
