v149 · CSS · Canvas

Canvas Rendering

The image-rendering CSS property applies to <canvas> elements too — controlling how the browser scales the drawn bitmap when the CSS size differs from the pixel dimensions. Compare all four values with a pixel-art source drawn at native resolution.

Source image size (canvas px)
16×16 px
Display scale (CSS size)
6×
Source pattern

auto

smooth

crisp-edges

pixelated

Each canvas is drawn at the source size (e.g. 16×16 px), then CSS scales it up to the display size. The four canvases are identical in pixel content — only image-rendering differs. crisp-edges avoids smoothing while not necessarily using strict nearest-neighbour; pixelated forces nearest-neighbour (blocky pixels); smooth and auto apply bilinear interpolation. 
/* CSS: tell the browser how to scale the canvas bitmap */
canvas {
  width: 160px;   /* display size (CSS px) */
  height: 160px;
  /* The canvas itself is 16×16 — will be scaled 10× */
}

canvas.crisp  { image-rendering: crisp-edges; }
canvas.pixel  { image-rendering: pixelated; }
canvas.smooth { image-rendering: smooth; }
canvas.auto   { image-rendering: auto; }

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗