To render crisp pixel art in HTML5 Canvas without anti-aliasing blur, set ctx.imageSmoothingEnabled = false on the 2D context before drawing. Scale your sprites using whole integer factors, and apply the CSS rule image-rendering: pixelated to the canvas element so any browser-level upscaling stays completely sharp without interpolation blur.
At a glance
| Fact | Value | Source |
|---|---|---|
| Canvas 2D property to disable smoothing | imageSmoothingEnabled = false | developer.mozilla.org |
| CSS property for crisp scaled images | image-rendering: pixelated | developer.mozilla.org |
Set ctx.imageSmoothingEnabled = false on your 2D context before drawing sprites – by default this is true and the browser blurs pixels when it scales an image up. Draw sprites at integer scale factors (such as 2x or 3x) so each source pixel maps cleanly to a block of screen pixels, which is exactly what MDN describes as the goal of a crisp pixel art look.
Playgama MCP lets an AI agent create the game, upload builds and covers, and publish a playable sandbox link directly from Cursor or VS Code.
What if I resize the canvas element with CSS?
Setting the canvas’s CSS width/height larger than its internal width/height attributes triggers a second, independent scaling step done by the browser, not by Canvas 2D. Add image-rendering: pixelated (or crisp-edges for wider browser support) to the canvas element’s CSS so that scaling stays nearest-neighbor too. Watch out: when the CSS size doesn’t align to an integer multiple of the device pixel ratio, some pixels render slightly larger than others, an unevenness MDN flags as a known limitation of pixelated.
- Keep source art on a small, fixed grid; store sprite sheets as atlases (MDN’s tilemap guide covers this pattern).
- Test on mobile browsers: canvas dimensions that exceed device memory or size limits can cause rendering issues or clamp the canvas.
- Re-check after any CSS framework or portal iframe adds its own scaling to the canvas.
Sources
- CanvasRenderingContext2D: imageSmoothingEnabled property – MDN
- Crisp pixel art look with image-rendering – MDN
- image-rendering CSS property – MDN
- Tiles and tilemaps overview – MDN
- Playgama MCP
Related questions
Does imageSmoothingEnabled affect WebGL canvases too?
No, it is a Canvas 2D context property. For WebGL you control filtering yourself via texture parameters like gl.NEAREST instead of gl.LINEAR.
Why is my pixel art still blurry after setting imageSmoothingEnabled to false?
Check if the canvas is also being scaled by CSS – that’s a separate step the browser performs, and needs image-rendering: pixelated to stay sharp.
Should I scale sprites by non-integer factors for a specific screen size?
Avoid it. Non-integer scaling makes some source pixels map to different-sized blocks on screen, breaking the uniform pixel-art look even with smoothing off.
Last updated: 30 September 2026