Canvas occupy the entire screen with css

Asked

Viewed 1,421 times

2

I have my canvas on Html5:

<canvas></canvas>

I want the canvas to occupy all available area of the browser, I tried to do as follows:

canvas{
    display: block;
    width: 100%;
    Height: 100%;
    border: 1px solid #c33;
}

The Width is occupying everything, but the Height does not take up everything. It takes up all the space of the browser?

css html5 canvas

  • Puts a reference to html and body tags in css with a 100% height. This should solve the problem

  • opa, thanks, solved the problem, just a question: no problem in leaving the body and html in the css set the height?

  • 1

    No, there’s no problem :)

1 answer

2


The height: 100% only work if you use position: absolute (or fixed) or Quirck Mode (is not recommended, always use a doctype).

A way to solve would be like this (in this case recommend fixed, if you want to hide the rest of the elements):

#meuCanvas {
    display: block;
    width: 100%;
    Height: 100%;
    border: 1px solid #c33;
    position: fixed; /*ou position: absolute;*/
     top: 0;
     left: 0;
}

<canvas id="meuCanvas"></canvas>

Browser other questions tagged css html5 canvas

You are not signed in. Login or sign up in order to post.