Categories
JavaScript Answers

How to make HTML canvas full screen with JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.