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.

Answer 2

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

And use Jquery to re-size the canvas

function resizeIE()
{
canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

if(window.innerWidth<960) //for other device (only for me)
{
  var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
  //to make the ratio of canvas find the pencentage
  //ex. canvas height: 1700px canvas width: 679px;
  //(679*100)/1700 = 39.941 <-- use this one
  //best solution
}
else
{
  var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
 }
}

for re-size window apply on document.ready

window.onresize = function(event) {
  resizeIE();
};