make canvas height auto

Question

I have the canvas

<canvas id="canvas" width="1700" height="679" style="background-color:#ffffff;width:100%;overflow:hidden;margin-top: -7px;"></canvas>

It work fine on chrome and firefox. However, ie can work only with width:100% but not change the height (height on 679)

I try height to be auto and 100% but getting wose

Edit: finally! I got it. It's true that the canvas content will be not good at width 100%. However, for the height (IE9 above is work) you have to set height style

$("#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();
};

Solution 1

$("#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();
};

Solution 2

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.

Comments

[user1128331]

I do swf and convert with CreateJS export, so I don't know how to redraw the contents.

[user1128331]

Thank you that you help me on canvas.width and canvas.height

[unenthusiasticuser]

Thanks, I think this should really be marked as the answer - combined with a window.onresize event, the above solution by markE is what most people will actually want for a fullscreen canvas. It doesn't make sense to set canvas.style.height like OP's own answer shows because you'll end up with a blurry and distorted canvas.