Multiplayer Game Canvas Size

I made a multiplayer game called spaceships and is available here: SpaceShips

Since Pople have different sizes of screens i was wondering if there is any possibility to scale a canvas up and down with the screen width/height. My goal would be to make it “fullscreen” for everyone (as far as possible ofc)

Thx for you time!

Same as any element, canvas is no different. A few different ways to do it, but

width: 100vw;
height: 100vh;

Will do it. Note that just this is probably not what you want – it will stretch and squash your canvas. You need to take into account aspect ratio. This is relatively easy to do with CSS if you know the aspect ratio in advance, eg:

There are sometimes issues using above method though, so JS is normally necessary if there’s a problem (you get the height/width, figure out the aspect ratio, resize the height/width to the desired height/width taking into account the ratio).

Thanks a lot! Yes i want to make it scale in the correct ratio ofc.

I’ve added now 16:9 support since it seems to be the most common. But now i have problems with other browsers than chrome --> like always