make canvas height auto

Question

I have the canvas

Answer 1

If you use CSS to resize canvas you are actually reshaping the canvas's viewport.

Think of this as scaling the image. Just like when you resize a .jpg image, you can get pixilation and distortion.

Instead resize the canvas element's size.

Think of this as adding more empty pixels to the width and height of the canvas, rather than "stretching" the existing pixels.

Here's how to add pixels to the canvas element to make it 100% of the browser window:

var canvas=getElementById("myCanvas");
canvas.width= window.innerWidth;
canvas.height=window.innerHeight;

If you are resizing your browser window, you can put this code in the windows resize handler to make it happen automatically.

Note: Whenever you resize the canvas this way, you will have to redraw the canvas contents.