Resize Canvas

Question

I'm trying to make a project using canvas, but I can't seem to resize the canvas using %. If I do it in HTML the canvas resizes with pixels. In CSS the quality of the canvas is lowered. In JavaScript it just breaks the canvas. How can I resize the canvas depending on the users screen without lowering the canvas quality?
https://code.sololearn.com/WAYQeutAfeXe/?ref=app

Answer 1

Run this to watch how CSS and HTML canvas scaling properties interact:
https://code.sololearn.com/WETCkRaPNVhy/?ref=app

I'm using pixels. To calc by "viewport" using "vh" and "vw" for percentage of viewport height and width:

Line 28... let's use 50, to test scaling up to 50% of the user's view:
var maxOuterDimension = 50; // was 200 for use as pixels

Lines 67-68, change the units from "px" to viewport-relative height / width:
theCanvas.style["height"] = cvsContainerHeight + "vh"; // was 'px'
theCanvas.style["width"] = cvsContainerWidth + "vw"; // was 'px'

And run. The units are required when setting styles this way (the engine does weird things if you omit them).