javascript - How can I scale the HTML5 canvas without making it blurry? -

i have created canvas using following markup:

<canvas id="canvas"></canvas> 

now, if specify width , height here directly, drawings on canvas pretty sharp.

<canvas id="canvas" width="600px" height="400px"></canvas> 

but way can't scale canvas flexibly cover every screen size. using vh or vw instead of pixels doesn't work either. tried setting them in javascript like:

$('#canvas').css({    "height": window.innerheight,    "width": window.innerwidth  }); 

this covered whole canvas made lines blurry. there way can sharp images while canvas still covers whole screen?

i tried using:

$("#canvas") .prop("width", window.innerwidth) .prop("height", window.innerheight); 

but objects on canvas (for example circle drew) still blurry. when open devtools, see following markup:

<canvas id="canvas" style="height: 768px; width: 1366px;"></canvas> 

so, guess width , height still being defined css.

canvas css properties not resize canvas, rescale it.
may change properties js:

$("#canvas")     .prop("width", window.innerwidth)     .prop("height", window.innerheight);