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 {
display:block;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}<div class="screen">
<canvas id="myCanvas" width="300" height="120">
</canvas>
</div>Use a negative margin-bottom value for your canvas element. Anything between margin-bottom: -5px; and margin-bottom: -105px; will work for this example.
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;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
canvas {
margin-bottom: -5px;
}<div class="screen">
<canvas id="myCanvas" width="300" height="120">
</canvas>
</div>