Make canvas fill the whole page

Question

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

possible duplicate of [Resize HTML5 canvas to fit window](http://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window) — Jukka Suomela, Jun 20 '14 at 14:28

score 39 · Accepted Answer · answered Sep 14 '10 at 09:25

39

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.

answered Sep 14 '10 at 09:25

Ian Devlin

18,534
6
55
73

27

No, this doesn't work. It just stretches the image to fill the page, but it doesn't change the internal width and height of the canvas. The result is just a blurry mess. – zett42 Aug 07 '19 at 19:55
To remove scrollbars, use `canvas { display: block; }` as per [this answer](https://stackoverflow.com/a/31204041/5231110). – root Jul 08 '23 at 11:09
@zett42 Are you getting different results from setting `width` to `100%` vs. something like `window.innerWidth` as per other answers, even though those two "values" have the same meaning? How is that possible? Maybe all answers here require redrawing the canvas image, not only this answer? – root Jul 08 '23 at 11:46

score 17 · Answer 2 · answered Sep 14 '10 at 14:01

17

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

answered Sep 14 '10 at 14:01

Didats Triadi

1,502
2
14
13

score 13 · Answer 3 · answered May 19 '18 at 22:50

13

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

maybe that easy?

answered May 19 '18 at 22:50

Pixsa

571
6
16

sunderls · Answer 4 · 2015-07-16T14:33:50.990

10

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

edited Jul 16 '15 at 14:33

answered Jul 03 '15 at 10:04

sunderls

760
7
8

Best answer! The only thing that worked for me. I only had to add this one rule. – agiopnl Jan 14 '22 at 17:46
`canvas { display: block; }` seems to work nicely in combination with [the top answer](https://stackoverflow.com/a/3707579/5231110). – root Jul 08 '23 at 11:08

score 1 · Answer 5 · edited Sep 18 '15 at 12:59

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>

score 1 · Answer 6 · answered Sep 14 '10 at 08:49

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.

score 0 · Answer 7 · edited May 23 '17 at 12:26

0

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?

edited May 23 '17 at 12:26

Community

1
1

answered Sep 14 '10 at 08:24

Kintaro

1,287
11
17

6

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? – Sergei Basharov Sep 14 '10 at 08:28

Make canvas fill the whole page

7 Answers7