Making canvas fullscreen using Javascript

Question

So I was trying to make a fullscreen canvas for a HTML document using Javascript. I have researched on how to create fullscreen canvas and I found a method but it is not perfect fullscreen. There is extra on the sides the bottom which makes the scroll bar come up. The code that I used is:

canvas = document.getElementById("canvas");
canvas.width = window.innerWidth
canvas.height = window.innerHeight

I found out that the bookmark that I have in my browser (Chrome) pushes the canvas and when I remove it doesn't overflow outside. Is there anyway where if I have a bookmark or don't it will always result in a fullscreen canvas with no extra from the sides and the bottom

[This answer](https://stackoverflow.com/a/4037426/215552) to [HTML Canvas Full Screen](//stackoverflow.com/q/4037212) mentions using `overflow:hidden` to prevent that. Have you tried that? — Heretic Monkey, Jun 15 '18 at 22:49
Yes that works, Sorry I'm still a beginner at HTML, CSS and Javascript — Moorad, Jun 15 '18 at 22:54

score 2 · Answer 1 · answered Jun 15 '18 at 22:49

2

scrollHeight and scrollWidth might help

canvas.width = document.body.scrollWidth
canvas.height = document.body.scrollHeight

answered Jun 15 '18 at 22:49

Andrew

7,201
5
25
34

Making canvas fullscreen using Javascript

1 Answers1