0

Have uploaded my work to

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>

On resize i want the change the height and width of canvas but on resize the image gets distorted. How can i keep the height and width constant on resize and some images should be responsive.

Rexy Joseph
  • 1
  • 2
  • there should be a property that allows you to lock the aspect ratio. See http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio – Takarii Aug 05 '16 at 11:18
  • The image is inside the canvas not outside – Rexy Joseph Aug 05 '16 at 12:37
  • If you want to use CSS to resize Canvas you must always redraw the image while maintaining the original aspect ratio. If you don't keep the aspect ratio constant the image will always distort. See [this answer](http://stackoverflow.com/questions/38648922/html5-canvas-responsiveness-does-not-work/38664703#38664703) in the duplicate Q&A. – markE Aug 05 '16 at 16:28

0 Answers0