防止响应画布中的图像拉伸

Question

已将我的作品上传到

https://codepen.io/rexyjoseph90/pen/rLqpdq

-----------------------------------------------------------------
CSS


    #canvas{width: 100%;height: 100%;background-color: #f2f2f2;}

-----------------------------------------------------------------

JAVASCRIPT



$(window).resize(function(){

   $("#canvas").width($(window).width());
   $("#canvas").height($(window).height());

 });

var canvasid = document.getElementById("canvas").getContext("2d");

var imgobj = new Image();
imgobj.src = "images/canvasobj.png";
imgobj.onload = function(){

canvasid.drawImage(imgobj,0,0);

}

-----------------------------------------------------------------
HTML

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

在调整大小时，我希望更改画布的高度和宽度，但在调整大小时，图像会变形。如何在调整大小时保持高度和宽度不变，一些图像应该响应。