How to Turn Off Antialiasing on an HTML Canvas Element with JavaScript?

To turn off antialiasing on an HTML canvas element with JavaScript, we can set the imageSmoothingEnabled of the 2d canvas context to false .

For instance, we can write the following HTML:

<canvas width='200' height='200'></canvas>

to add the canvas.

Then we can write:

const c = document.querySelector("canvas");
const ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

to get the canvas and turn off antialiasing for it with:

ctx.imageSmoothingEnabled = false

We get the canvas element with document.querySelector .

Then we call getContext with '2d' to get the 2d context.

Then we draw a circle in the canvas with:

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();