How can I set the dimensions of my canvas same as my screen size.

Question

If I give it random dimensions then scrollbars appear on my webpage. I dont want that.
I want it to be the same size as that of my screen.

PS: My goal is to make a shape at the center of the screen by using height/2 and width/2 and for that I need the canvas to take the size of my screen.

Answer 1

@Casey you have to modify the sizes of the canvas, i mean... not the context variable. :3

This is the easiest way, a professional work should resize the screen automatically: https://code.sololearn.com/WT0sb1EkTiAi/?ref=app

Answer 2

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

Answer 3

you have a code on the playground we can play with?

Answer 4

window.onload = function() {
canvas = document.getElementsByTagName("canvas")[0];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

Answer 5

It's the first tag canvas in your DOM, if you have two tags and you want to select the second of them, you have to write [1] after the statement.

For the third tag [2] and so on...

You have no need to specify it for the getElementById( ) method, id is a unique element. ^^

Answer 6

The canvas can't work if you remove [0], because you storaged it in a variable with the getElementsByTagName( ) method, and it is the first canvas tag in your DOM.

Yep, [0] for the getElementById( ) method, is useless.

All this things are covered in the Javascript tutorial (Sololearn or w3schools), read something about DOM.

Answer 7

Show us your code please

Answer 8

@Maz, I tried that. I went on Stack Overflow to find answers and it suggesed the same thing.
It didn't work.

I did initialize the context variable (if thats what you're wondering)
but idk what's wrong.

Answer 9

Alright man, Thanks for the help. I really appreciate it :D

Answer 10

@Maz, There is a line in the code that you posted:

var canvas = document.getElementsByTagName("canvas")[0];

can you tell me what the [0] is for??

Answer 11

But if I remove the [0] then the canvas shrinks to like 15% in size.
If getElementById is unique then [0] shouldn't have any purpose right?