+2

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

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?

12/7/2019 7:47:28 AM

Lemonades For Sale

5 Answers

New Answer

+5

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.)

+3

always welcome 😁🎉 Nice pong game by the way

+1

Your english is good. Thanks!

+1

Haha thanks.

+1

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