Can I turn off antialiasing on an HTML <canvas> element?

Precision in pixel placement

To draw 1-pixel lines, tweak the coordinates you draw with to fall at *.5 value. This lines up your ops with the pixel grid and gives lines that cool pixel art look.

// Set line width to turn up the retro feel
ctx.lineWidth = 1;

// Shift to pixel grid for those crispy lines, just like mom used to draw
ctx.beginPath();
ctx.moveTo(10.5, 10.5);
ctx.lineTo(10.5, 100.5);
ctx.stroke(); // Bam! Instant nostalgia!


Edge control with canvas shifting

Push the canvas by 0.5 pixels using translate—especially handy when drawing a series of one-pixel lines. It improves the line placement and helps achieve the un-antialiased look.

// Nudge canvas by 0.5 pixels
ctx.translate(0.5, 0.5);

// Draw a strong, independent one-pixel line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.stroke(); 

// Reset translation, because not everyone likes change
ctx.translate(-0.5, -0.5);


When to adjust coordinates

Adjusting coordinates is not always needed. When? For static images or certain visual styles, these adjustments can deafen the antialiasing effect. With dynamic or responsive content, use these tweaks wisely, ensuring optimal clarity across resolutions and zoom magnifications.

Addressing shapes and text

Shape your own destiny

If you're drawing shapes like circles or curves, remember to keep your coordinates and dimensions whole numbers and imageSmoothingEnabled property set to false. Here's how you can draw a circle like a boss:

// Circles have never been this punk!
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2); // No subpixels allowed!
ctx.closePath();
ctx.fill(); // Drops mic


Text Rendering: Pixel Perfection or Nothing!

Your text can also join the pixel party! Pixel-based font sizes and text alignment with the pixel grid are your pals. Remember, imageSmoothingEnabled doesn't affect text rendering — font selections and positioning do all the work.

// Let's talk pretty text
ctx.font = '16px PixelPerfect, sans-serif'; // Size fits pixels!
ctx.textBaseline = 'top';
ctx.fillText('Guess who's pixel perfect now?', 10, 10); 


Browser Check: Don't Skip This

Different browsers might have their ideas about how to render a <canvas> with antialiasing turned off. Surprise surprise! So, always test on multiple browsers to make sure your graphics stay sharp and rebellious!