How to resize canvas javasript / jQuery?

I try to work with canvas. Now the canvas appears when the button is pressed and the line is drawn. I want to resize the canvas on my own before the appearance of the canvas and the “drawing” line, but it turns out that I just stretch the image (I change the css properties via jQuery). I understand that this is not correct, but I can not understand how to change the size of the original canvas, and not stupidly stretch the image.

I will give an example code:

$("button").click(function(){ $("#canvas").width(1500); $("#canvas").height(1500); $("#canvas").toggle(); ctx.strokeStyle= "red"; ctx.beginPath(); ctx.moveTo(60, 0); ctx.lineTo(60, 100); ctx.width = 1500; ctx.height = 1500; ctx.stroke(); }); 

All code here: https://codepen.io/anon/pen/qREYeM