I am trying to have a canvas fill the entire viewport and resize, whenever the user resizes the browser window.
However, when I try to use a size of 100%
, it loses quality.
I am kind of a newb in JavaScript programming.
Can someone please help me?
I figured out a way:
I calculate a scaling factor, by which I scale the size, but not the position of each element drawn.
I do not want to scale the position, because then some elements might be off screen.
Thus I can not use setTransform
, as suggested in the comments.
Here is the code I used for calculating the scaling factor.
If someone has improvements, please share them in the comments below!
if (window.screen.width > window.screen.height)
scalingFactor = window.screen.width * window.devicePixelRatio / 1280;
else
scalingFactor = window.screen.height * window.devicePixelRatio / 720;