Canvas fill the entire screen with css

Question

Canvas fill the entire screen with css

Navigation

#1 by (2 votes)

2

I have my canvas in html5:

<canvas></canvas>

I want the canvas to occupy every available area of the browser, I tried to do this:

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

Width is occupying everything, but Height does not occupy everything. Can you do all your browser space?

html5 css canvas

asked by anonymous 24.01.2015 / 18:46

1 answer

Interceptor in Spring MVC How to change the name of the target database when performing the restore? (Class Restore C # .NET)

score 2 · Accepted Answer

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

One way to solve it would be like this (in this case I 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>