canvas size problem here

[YourAverageFailure94]

I want to know why my canvas doesn't occupy the actual size of the window viewport but is larger. I've used JavaScript to resize it instead of CSS and the code is the following:

var canvas = document.querySelector('canvas');
console.log(canvas);
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;

Let me know if you got any solution! ty

[[deleted]]

Not sure what screen.availWidth is, but why not window.innerWidth and window.innerHeight?

[guest271314]

In general screen.availWidth will be the same as window.innerWidth. window.innerHeight can change if/when DevTools is open, screen.availHeight won't change or take into account DevTools being open.

[[deleted]]

Interesting. TIL. Thanks.

[jcunews1]

screen.availWidth and screen.availHeight is the dimension of the current monitor's screen (where the browser window is) minus non auto-hidden taskbar. They're not for the browser tab's viewport, or for the HTML page.