Canvas Has White Space At the Bottom and Scrolls Too Far

Canvas has white space at the bottom and scrolls too far

Make the canvas a block element or use vertical-align:top. By default, canvas is an inline element and it will behave similary to an img; thus you will have the whitespace issue due to vertical alignement (Image inside div has extra space below the image)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);
.screen {
background: red;
height: 100px;
width: 300px;
overflow: auto;
border-radius: 20px;
canvas {

::-webkit-scrollbar {
width: 0px;
height: 0px;
<div class="screen">
<canvas id="myCanvas" width="300" height="120">

why is there white space under the canvas when I scroll down

There is white space under your canvas, because the HTML <canvas> element has a default style of display: inline;. Inline elements are designed to contain text, and therefore white space gets added underneath the element for descenders (the bits that hang off the bottom of 'y' and 'p').

To fix the problem, apply display: block; to the element instead.

Using Javascript, you would do that like this: = "block";

//declare variablesvar body = document.getElementById("body");var canvas = document.getElementById("canvas");var iwidth = window.innerWidth;var iheight = window.innerHeight;
//puts canvas in top right = "0";
//changes the canvas's style namely color, margin, width and = "red"; = "0"; = "block";canvas.width = iwidth;canvas.height = iheight;
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>DUNGE</title></head><body id="body">  <canvas id="canvas"></canvas>  <script src="script.js"></script></body></html>

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

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">
<link rel="stylesheet" href="styles.css">
<canvas class="canvas"></canvas>
<script src="./bundle.js"></script>

I want to delete the canvas space between the first and second lines

Just apply this style:

canvas {
border:1px solid;
margin-bottom: -5px;
margin-right: -1px;

why there is a White space on the top on html2canvas?

GitHub Issue

You should check the document scroll, i face the same issue when page scroll is
active or when page is scrolled down.

Try adding

scrollX: 0,
scrollY: -window.scrollY

to the html2canvas options

Eliminate ghost margin below HTML5 canvas element?

Add vertical-align: bottom to it.

This is caused by the canvas being an inline element. As such, it is effectively considered a character. As such, it must follow the baseline rule, which is to leave a little space below the line in case of characters such as gjpqy which drop below the baseline. By setting the vertical-align to bottom, you are actually aligning the canvas to the bottom of the drop-down letters. So long as the canvas itself is taller than the line-height, you will have no problems. Should the canvas be shorter than the line-height, you will start seeing "ghost margins" above the canvas as it reserves room for bdfhklt, the taller letters. This can be fixed by adding a line-height: 1px rule.

Annoying white space around a full screen canvas in HTML

It seems that I've found a solution.

body {margin: 0}

Why there is interval between canvas and div element below?

You just need to set canvas to { display: block; } as it's inline by default.

JSBin Snapshot

Also see here: Inline Elements | MDN

Html5 canvas scrolling vertically and horizontally

So your node drawings don't fit on the canvas size?

You can easily "shrink" your content to fit the visible canvas with just 1 command!

The context.scale(horizontalRescale,verticalRescale) command will shrink every following drawing by your specified horizontalRescale & verticalRescale percentages.

An Important note: You must make horizontalRescale,verticalRescale the same value or your content will be distorted.

The nice thing about using context.scale is that you don't have to change any of the code that draws your nodes ... canvas automatically scales all those nodes for you.

For example, this code will shrink your nodes to 80% of their original size:

var downscaleFactor= 0.80;

context.scale( downscaleFactor, downscaleFactor );

Rather than go through your 200+ lines of code, I leave it to you to calculate downscaleFactor.

Related Topics

Leave a reply