JavaScript Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *