Sometimes, we want to fix blurry text in the HTML5 canvas with JavaScript.
In this article, we’ll look at how to fix blurry text in the HTML5 canvas with JavaScript.
How to fix blurry text in the HTML5 canvas with JavaScript?
To fix blurry text in the HTML5 canvas with JavaScript, we set the width and height of the canvas.
For instance, we write
canvas.width = 1000;
canvas.height = 500;
canvas.style.width = width;
canvas.style.height = height;
to set the canvas width and height to a large number with
canvas.width = 1000;
canvas.height = 500;
to increase its resolution to make it less blurry.
Then we set the actual width and height of the canvas with
canvas.style.width = width;
canvas.style.height = height;
Conclusion
To fix blurry text in the HTML5 canvas with JavaScript, we set the width and height of the canvas.