Canvas has white space at the bottom and scrolls too far

by

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>

More Related Contents:

  1. Changing three.js background to transparent or other color
  2. How does object-fit work with canvas element?
  3. Why box-sizing is not working with width/height attribute on canvas element?
  4. How would I achieve a shadow that won’t show through transparent text?
  5. Fill in text in HTML5
  6. CSS customized scroll bar in div
  7. iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
  8. Is there a way to apply a CSS style on HTML5 datalist options?
  9. Show Child Div within Hidden Parent Div
  10. Failed to decode downloaded font
  11. How can I ensure that text is inside rounded div?
  12. Internet Explorer z-index bug?
  13. Which HTML5 reset CSS do you use and why? [closed]
  14. How to customize the HTML5 input range type looks using CSS?
  15. Div height 100% and expands to fit content [duplicate]
  16. Add a text suffix to
  17. html5 vertical spacing issue with
  18. Creating a ‘New’ spiky label with 24 or above point burst
  19. How to position a div in the middle of the screen when the page is bigger than the screen
  20. Nested rows with bootstrap grid system?
  21. How to write a caption under an image?
  22. How do I line up 3 divs on the same row?
  23. CSS: How to align vertically a “label” and “input” inside a “div”?
  24. Div side by side without float
  25. Full background image with fade effect
  26. There is a 4px gap below canvas/video/audio elements in HTML5
  27. Style lower and upper fill in HTML5 range input
  28. How can I align 3 divs side by side?
  29. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment