[SOLVED] Resize canvas to viewport without losing quality

Resize canvas to viewport without losing quality

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?

Solution

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;