How can I make a full screen resizable canvas in Html?

Question

I want to be able to make a canvas that takes up the whole tab using Html and JavaScript. I also want it to resize according to how you resize the browser window. Is there a way?

Answer 1

I use the window innerWidth and innerHeight property for that.

const canvas = document.getElementById("myCanvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

That will make your canvas take up the width and height of the document. Also don't forget to set the margin of the body to 0 so the canvas will allocate the entire document.

body {
margin: 0;
}

There is also a thing that you SHOULD concern if the user resized the screen.

const canvas = document.getElementById("myCanvas");

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

window.addEventListener("resize", resizeCanvas);

resizeCanvas();

So if the user resizes the screen, then the canvas width and height will resize as well. (Sorry for my bad english. Also, please correct me kindly if I'm wrong.)

Answer 2

always welcome 😁🎉 Nice pong game by the way

Answer 3

Your english is good. Thanks!

Answer 4

Haha thanks.

Answer 5

I'll use what you just taught me to make the game better.