+ 4

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?

7th Dec 2019, 7:47 AM
Lemonades For Sale
Lemonades For Sale - avatar
5 Antworten
+ 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.)
7th Dec 2019, 8:11 AM
Nootnoot
Nootnoot - avatar
+ 3
always welcome 😁🎉 Nice pong game by the way
7th Dec 2019, 8:23 AM
Nootnoot
Nootnoot - avatar
+ 1
Your english is good. Thanks!
7th Dec 2019, 8:21 AM
Lemonades For Sale
Lemonades For Sale - avatar
+ 1
Haha thanks.
7th Dec 2019, 8:23 AM
Lemonades For Sale
Lemonades For Sale - avatar
+ 1
I'll use what you just taught me to make the game better.
7th Dec 2019, 8:28 AM
Lemonades For Sale
Lemonades For Sale - avatar