How to turn off antialiasing on an HTML canvas with JavaScript?

To turn off antialiasing on an HTML canvas with JavaScript, you can set the imageSmoothingEnabled property of the canvas context to false.

To do this, we:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Disable antialiasing
ctx.imageSmoothingEnabled = false;

This will turn off antialiasing for all subsequent drawing operations on the canvas context.

You need to ensure that you set this property before you start drawing on the canvas.

If you have multiple canvases on your page and you want to disable antialiasing for each of them, you’ll need to set the property for each context individually.