Crisp pixel-art scaling
Render at the game's native low resolution, then scale the canvas up with CSS. Turn off smoothing in both places, and scale by whole numbers — a 2.5× scale makes some pixels wider than others. Leftover space becomes letterboxing.
#pixel-art#canvas#scaling#css
ts
// CSS: canvas { image-rendering: pixelated; }
const W = 320, H = 180; // native game resolution
const canvas = document.querySelector("canvas")!;
canvas.width = W;
canvas.height = H;
const ctx = canvas.getContext("2d")!;
ctx.imageSmoothingEnabled = false; // no blur when drawing scaled sprites
function fit() {
const scale = Math.max(1, Math.floor(Math.min(innerWidth / W, innerHeight / H)));
canvas.style.width = `${W * scale}px`;
canvas.style.height = `${H * scale}px`;
}
addEventListener("resize", fit);
fit();