How to make Canvas take 100% of remaining space?

Question

Similar to how i want a div to take 100% height, 100% width, or both. i want a Canvas to take 100% width and 100% height:

(Link to JsFiddle for your perusal)

Markup:

<div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
</div>

CSS:

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
#canvasContainer {
    width: 100%;
    height: 100%;
    background-color: green;
}
#myCanvas {
    width: 100%;
    height: 100%;
}

Javascript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.stroke();

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(canvas.width, 0);
ctx.lineTo(0, canvas.height);
ctx.stroke();

Which results in something not taking 100% of browser window:

enter image description here

It works fine if you delete the Canvas:

enter image description here

Downside of that is then i don't have a Canvas.

@Ani A canvas that takes 100% of it's containing div. In the end we'll be converting a native CAD application to canvas. First step: create a canvas the size of the *"client docked*" div. Maybe i'm not sure what you're asking: i want the entire canvas to be visible on screen at once - no overflow that requires a scrollbar. — Ian Boyd, Jun 21 '13 at 15:23

score 9 · Answer 1 · 2015-03-06T22:47:26.423

Sizing a canvas element

If you stretch the canvas using CSS you will stretch the poor canvas which has a default size of 300x150 pixels to the whole screen - imagine you had an image of that size and which you did the same to - will look pretty bad.

Canvas content can not be stretched using CSS (it acts as an image that way). You need to explicitly set the pixel size of the canvas.

This means you will need to get the size of the parent container and set it as a pixel value on the canvas:

First off, to get rid of scroll bars etc.adjust the CSS you have:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding:0;
    overflow:hidden;
}

Now modify this rule:

#myCanvas {
    background-color: green;
    position:fixed;
    left:0;
    top:0;
}

Now reduce your markup to this only (if you want the canvas covering the whole sceeen you don't need a container other than the window):

<canvas id="myCanvas"></canvas>

Now we can calculate size:

var canvas;

window.onload = window.onresize = function() {

    canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;   
}

And that's it.

Working demo (resize the window to see).

Good stuff. Thanks Ken. Works as a charm. – Boro Mar 06 '15 at 17:01 — Boro, Mar 06 '15 at 17:01

score 1 · Answer 2 · answered Jun 21 '13 at 15:16

you can position absolute with 0 everywere:

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Then just look in which element it is positionned, add position: relative to handle the block it covers. In your case probably: #canvasContainer, but maybe body if it's just for a single full screen.

score 1 · Answer 3 · answered Jun 21 '13 at 15:31

1

I have had a similar issue in the past. My solution for it was setting overflow: hidden on the html

Fiddle Here

It gets rid of that little bit at the bottom, which if you inspect the pages is just a little bit extra, and not actually the height of the body. If anyone has some insight into what that is I am all ears.

answered Jun 21 '13 at 15:31

Rchristiani

424
3
18

That seems to simply hide the scrollbars in the browser; which starts to become a problem when other elements appear. – Ian Boyd Jun 21 '13 at 17:00

GoldBishop · Answer 4 · 2014-05-30T10:23:42.517

Modified some of the examples here to get mine to work.

JSFiddle: http://jsfiddle.net/FT3pP/1/

JS:

$( document ).ready( function () {
    SizeBackground();
} );

function SizeBackground(){
    var canvas = $( "canvas#background" )[0];

    fitToContainer( canvas );
}

function fitToContainer( canvas ) {
    canvas.width = canvas.parentElement.clientWidth;
    canvas.height = canvas.parentElement.clientHeight;
}

CSS:

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0; }

div .container {
  width: 100%;
  height: 100%; }
div#pallette {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px; }

canvas#background {
  position: fixed;
  left: 0;
  top: 0;
  background: black; }

HTML:

<body>
    <div id="pallette">
        <div class="container">
            <canvas id="background"></canvas>
            <canvas id="middleground"></canvas>
            <canvas id="foreground"></canvas>
        </div>
        <div id="stats"></div>
        <div id="chat"></div>
    </div>
</body>

Only includes i had:

<!-- Styles Sheets -->
<link href="Scripts/App.min.css" rel="stylesheet" />
<!-- Javascript -->
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/app.js"></script>

How to make Canvas take 100% of remaining space?

4 Answers4

Sizing a canvas element