# Crisp pixel-art scaling
URL: https://wwadd.dev/moves/game-dev/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.


```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();
```

## Related Moves
- [Sprite sheet animation on canvas](https://wwadd.dev/moves/game-dev/sprite-sheet-animation)