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

Question

I have created a canvas using the following markup:

Now, if I specify width and

Answer 1

Canvas CSS properties do not resize canvas, they rescale it.
You may simply change the properties with your JS:

$("#canvas")
    .prop("width", window.innerWidth)
    .prop("height", window.innerHeight); 

Answer 2

1. canvas element size is controlled by its attributes width and height. To change the size you need to modify these attributes, not CSS. And they don't need units, they are in pixels.

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

2. Canvas draws bitmap, it's not scalable like vectors. You could only redraw the canvas after resized.

Answer 3

try:

var canvas = document.getElementById('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;