When working with canvas the window always seems to overflow

Question

As the title says im trying to work with canvas but whenever i try to set its height and width to 100% height and width of the page it just overflows by a tiny bit. I have no clue why its happening and its very annoying when trying to make something.

Does anyone have a clue as to why it is happening?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>Canvas Practice</title>
   <style type="text/css">
    canvas{
        height: 100%;
        width: 100%;
    }
    html,body
    {
        margin: 0;
        height: 100%;

    }
</style>
</head>
<body>
    <canvas></canvas>
    <script type="text/javascript" src="canvas.js"></script>
    </body>
</html>

This is my html with some basic inline css.

Welcome to SO buddy. To get better answers, it helps to produce a Minimal, Complete, and Verifiable example (see https://stackoverflow.com/help/mcve) — user184994, Oct 28 '17 at 11:08
There may be multiple reasons for that. Please post your code along with the question to help us understand your scenario. — Rajan Benipuri, Oct 28 '17 at 11:08

score 0 · Answer 1 · answered Oct 28 '17 at 11:09

0

The easiest thing to do is to always keep the canvas in its own div.

The only thing that will ever be in this div is the canvas.

Then you can use CSS to resize the div however you want. You want it as large as the body? Give the div width: 100%.

Then you can always rightfully do:

 canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

answered Oct 28 '17 at 11:09

Blesson Christy

380
3
13

just gave that a shot but for some reason the height still overflows by a tiny amount – AquaProgramming Oct 28 '17 at 11:16
Try using the CSS rule fixed for position with the canvas element: position:fixed; left:0; top:0; width:100%; height:100%; – Blesson Christy Oct 28 '17 at 11:20
managed to get it to work by mashing css lines onto it for days. but tbh normally it works perfectly fine but this time it just didnt listen to its window size. – AquaProgramming Oct 28 '17 at 11:23

score 0 · Accepted Answer · answered Oct 28 '17 at 11:24

0

Add display: block; to your canvas and it will work. I have added background just for reference.

    canvas{
        height: 100%;
        width: 100%;
        display: block;
        background: #222;
    }
    html,body
    {
        margin: 0;
        height: 100%;

    }

<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>Canvas Practice</title>
   
</head>
<body>
    <canvas></canvas>
    <script type="text/javascript" src="canvas.js"></script>
    </body>
</html>

Hope this help.

answered Oct 28 '17 at 11:24

Rajan Benipuri

1,772
1
9
21

Thanks man its finally starting to work. now i can move on to actually studying the canvas – AquaProgramming Oct 28 '17 at 11:32
Glad it helped. accept it as answer for others to get help as well. – Rajan Benipuri Oct 28 '17 at 11:33

When working with canvas the window always seems to overflow

2 Answers2