How to fix blurry text in an HTML5 canvas with JavaScript?

To fix blurry text in an HTML5 canvas with JavaScript, we set the canvas width and height to the parent’s width and height.

For instance, we write

const canvas = document.getElementById("canvas");
canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;

to get the canvas with getElementById.

Then we call getBoundingClientRect to get an object with the parent’s width and height.

And we set the width and height as the values of the canvas’ width and height to fix blurry text in the canvas.