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.