CODEWITHSUNDEEP
javascripthtmlcanvas
Sergei Basharov
Sergei Basharov

Reputation: 53850

Make canvas fill the whole page

How can I make canvas be 100% in width and height of the page?

Upvotes: 36

Views: 47599

Answers (7)

Pixsa
Pixsa

Reputation: 599

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

maybe that easy?

Upvotes: 13

Rama Ganapathy
Rama Ganapathy

Reputation: 21

on my observations this runs effectively, and gives a blue shade 

var c = document.getElementById('can');
  var ctx = canvas.getContext('2d');
  ctx.rect(0, 0, canvas.width, canvas.height);
  // add linear gradient
  var g = ctx.createLinearGradient(0, 0, c.width, c.height);
  // light blue color
  g.addColorStop(0, '#8ED6FF');   
  // dark blue color
  g.addColorStop(1, '#004CB3');
  context.fillStyle = g;
  context.fill();


<script>
var c = document.getElementById('can');
      var ctx = canvas.getContext('2d');
      ctx.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var g = ctx.createLinearGradient(0, 0, c.width, c.height);
      // light blue color
      g.addColorStop(0, '#8ED6FF');   
      // dark blue color
      g.addColorStop(1, '#004CB3');
      context.fillStyle = g;
      context.fill();
</scrip
html,body
{
	height:98.0%;
	width:99.5%;
}
canvas
{
	display:block;
	width:100%;
	height:100%;
}
<html>
<body>
<canvas id="can"></canvas>
</body>
  </html>

Upvotes: 1

sunderls
sunderls

Reputation: 783

This has something to do with <canvas> tag.

when create fullscreen canvas, <canvas> will cause scrollbar if not set to display:block.

detail: http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen

Upvotes: 10

Didats Triadi
Didats Triadi

Reputation: 1502

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];

Upvotes: 17

Ian Devlin
Ian Devlin

Reputation: 18870

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.

Upvotes: 41

Castrohenge
Castrohenge

Reputation: 8983

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.

Upvotes: 1

Kintaro
Kintaro

Reputation: 1287

Does this work for you?

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

from Force canvas element in html to take up the entire window?

Upvotes: 0

Related Questions