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

@sajay I add css inline the canvas to height:100% and height:auto. the result is smaller and remain the same when resizing — user1128331, Jun 21 '13 at 02:47
@user1128331 CSS does not work well with canvases as it stretches the canvas. See markE's answer too. — , Jun 21 '13 at 04:58
@user1128331 Removed your edit. Don't put close in subject. People are using their own time to help YOU so please consider the solution provided below. If you found a solution yourself you can post that as an answer. See http://stackoverflow.com/help/self-answer — , Jun 21 '13 at 05:02

score 2 · Answer 1 · answered Jun 20 '13 at 16:58

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.

answered Jun 20 '13 at 16:58

markE

102,905
11
164
176

I do swf and convert with CreateJS export, so I don't know how to redraw the contents. – user1128331 Jun 21 '13 at 02:44
Thank you that you help me on canvas.width and canvas.height – user1128331 Jun 21 '13 at 04:12
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. – unenthusiasticuser May 26 '17 at 12:19

score 1 · Accepted Answer · answered Jun 25 '13 at 02:21

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

make canvas height auto

2 Answers2

Linked

Related