How can I remove all the space around my canvas element?

Question

* {
    padding: 0;
    margin: 0;
    border: 0;
}

.canvas {
    border: 1px solid black;
    margin: 2px;
    width: calc(100vw - 6px);
    height: calc(100vh - 6px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas class="canvas"></canvas>
    <script src="./bundle.js"></script>
</body>
</html>

But for some reason, there is still space around the canvas (besides my margin and border). I used the same CSS for the first version of this project, that I needed to delete for reasons, and it worked just fine.

Please can you attach a screenshot and some browser info? The canvas renders correctly for me. — ObsoleteAwareProduce, Aug 14 '20 at 22:39
Why are you giving `.canvas` a margin? Not really sure what you mean, could you provide a screenshot, or something perhaps? — MarkBurns, Aug 14 '20 at 22:39
all you need is display:block to the canvas, no more complex code, it's a whitespace issue — Temani Afif, Aug 15 '20 at 01:11

s.kuznetsov · Accepted Answer · 2020-08-14T22:59:51.463

Was it necessary? In order to remove this space, the parent container needs to be set, in this case, this body tag should be set to the dimensions of the width and height.

* {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    width: 100%;
    height: 100vh;
}

.canvas {
    border: 1px solid black;
    margin: 2px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas class="canvas"></canvas>
    <script src="./bundle.js"></script>
</body>
</html>

score -1 · Answer 2 · answered Aug 14 '20 at 22:46

VH and VW are View height and View width. as such - they are the measurments of the screen sans any console url navigator. the View.

the reason you are getting white space is you are Calculating a new number... which is slightly smaller than the entire screen - by 6px, because you are shrinking 100% view coverage by subtracting px's from both height and width.

margin on the canvas also is a reason for you seeing white space....

margin ->border ->padding ->content is the nesting for that model. margin is just adding space to the element - which is space AROUND the element {space directly OUTSIDE the border} - (margins combine with other margins) - where padding increases space inside of the border of the div - margin increase space right outside the border of the targeted element.

so if you're goal is to fit it to 100% of the screen. you just need VH/VW to be set to 100; and nix the margin.

if you're goal is to fit it into 100% of the div container it is in... VH VW are the wrong measure units to use for that.

here is some code I did on codepen to test.

this results in the canvas covering the screen, leaving no space other than the canvas.

html

<html>
<body>
    <canvas class="canvas" id="canvas"></canvas>
</body>
</html>

css
* {
    padding: 0;
    margin: 0;
    border: 0;
}
.canvas {
    width: 100vw;
    height: 100vh;
}

js test

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height);

This is not what I am looking for, as I said in my post, I wanted to remove the space that wasn't the border or the margin, which is why I subtracted 6px from the vh and vw, so it would fit just right. But thanks for the suggestion anyway. — Gabriel Munhoz, Aug 14 '20 at 23:01
my apologies if I didn't understand the question. the the margin->border->padding->content model... you want the content to be right next to the border with no padding... is that accurate? — altruios, Aug 14 '20 at 23:10

How can I remove all the space around my canvas element?

2 Answers2