ansaurus

Question

Answer 1

A:

Does this work for you?

<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>

from http://stackoverflow.com/questions/517951/force-canvas-element-in-html-to-take-up-the-entire-window

Kintaro 2010-09-14 08:24:07

It sets width to 100%, but doesn't make it in height 100%. More than that, the objects is scaled too and looks like a small raster image had been enlarged so it looks weird. What can I do about this?

Sergey Basharov 2010-09-14 08:28:16

Answer 2

+1 A:

You can programatically set the canvas width + height:

// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();

I've tested this and it as long as you redraw what's on the canvas after you've resized it won't change the scaling.

Castrohenge 2010-09-14 08:49:56

Answer 3

+2 A:

Well I have it working here: Are Google's Bouncing Balls HTML5? by using the following CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}

Where #c is the id of the canvas element.

Ian Devlin 2010-09-14 09:25:05

thanks for the link !

Ninja Dude 2010-10-08 12:57:31

Answer 4

A:

you can use these codes without jquery

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];

Didats Triadi 2010-09-14 14:01:09

ansaurus

tags:

views:

answers:

Make canvas fill the whole page

related questions