Sometimes, we want to make HTML canvas full screen with JavaScript.
In this article, we’ll look at how to make HTML canvas full screen with JavaScript.
How to make HTML canvas full screen with JavaScript?
To make HTML canvas full screen with JavaScript, we can set the canvas width and height to the page width and height.
For instance, we write
const canvas = document.getElementById("mainCanvas");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
to select the canvas with getElementById.
Then we set the canvas width to the body element’s width with
canvas.width = document.body.clientWidth;
And we do the same with the height with
canvas.height = document.body.clientHeight;
Conclusion
To make HTML canvas full screen with JavaScript, we can set the canvas width and height to the page width and height.
