HTML and CSS Reference
In-Depth Information
Figure 15-1:
Canvas CSS versus pixel size.
You can also notice on the first two elements that when the canvas element is scaled up, the browser attempts
to smooth the generated image between pixels. By default all modern browsers apply either bicubic (IE) or
bilinear (everyone else) upsampling algorithms to images to make them look smoother when shown at a size
larger than their pixel dimensions. This upsampling rule also applies to canvas tags, so if you set the width and
height of the element to be larger than the pixel dimensions, some upsampling occurs.
NOTE
Bicubic and bilinear upsampling are two algorithms for taking an image of a certain size and making
it look better when scaled up. Without any upsampling the larger image would have a “jagged” look made
up of larger pixels. Both algorithms use a method of interpolating colors so that the larger image appears
smooth and not jagged, at a cost of some processing time and a loss of detail in the final image. Bicubic
tends to do a better job at preserving detail than bilinear but can cause strange “halo” effects on occasion.
This is usually okay, but if you create an 8-bit retro game, you may prefer to have a crisper pixelated look.
To support this, some browsers have support for a CSS property called
image-rendering
that gives a small
modicum of control over the resampling algorithm. As of this writing this is possible only in Firefox and In-
ternet Explorer, but WebKit has merged a patch into its nightly builds, so support in Safari, iOS, Chrome, and
Chrome for Android should be available by the time you read this. The goal is to force the browser to use the
faster nearest-neighbor algorithm, which doesn't do any interpolation between pixels. Only Microsoft enables
you to explicitly set the algorithm to use, whereas the other browsers give this style different names.
