Cannot draw on part of canvas

Question

Note the blank line at the bottom of the canvas. It’s impossible to draw on that line.

How can the entire canvas be used for drawing (in full resolution)?

Browser: 54.0.2840.99 (Official Build) m (32-bit) / Windows 7

Run in full page:

var el = document.getElementsByTagName("canvas")[0];
var ctx = el.getContext("2d");
el.width = el.clientWidth;
el.height = el.clientHeight;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(el.width, el.height);
ctx.lineTo(0, el.height);
ctx.fill();
ctx.closePath();

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 667.19px; /* = `80vh` in viewport of 834 px height */
}
.bar {
  flex: auto;
  background: black;
  height: 20px;
}
#display {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

 <div class="bar"></div>
 <div id="display">
   <canvas></canvas>
 </div>
 <div class="bar"></div>

To make it clear: The JavaScript code above adjusts the pixel dimensions of the canvas to match them with those of the canvas element. This question is about an area of the canvas which cannot be drawn upon.

Would you mind terribly if I attempted to use [Stack Snippets](http://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) to give a demo of the above code, for easier debugging? — Daedalus, Dec 15 '16 at 11:43
@Κ3Ν I added a paragraph at the end of the question for those who are too lazy to read the source code. Explained is that this question is *not* a duplicate of the question [Canvas width and height in HTML5](http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5). — feklee, Dec 15 '16 at 23:06
After attempting to reproduce the problem in the snippet, I found the cause; your browser is zoomed out at 90%. — Daedalus, Dec 16 '16 at 02:59
I'll add the snippet code, but it won't reproduce the problem, at least for me. As a warning, I'll have to modify it slightly, as the `.bar` divs do not appear with your provided css. — Daedalus, Dec 16 '16 at 09:34
Snippet code inserted; I had to comment out the flex box; if you can provide working code that reproduces the problem, as well as an example we can all look at, please edit it into shape. Otherwise, the above is a no-repo. Only at zoom 90% does the line appear for me. — Daedalus, Dec 16 '16 at 09:42
@Daedalus The flexbox is in there on purpose. Be sure to run the example in full page mode. Also, to replicate the issue, be sure to use the same browser as I. — feklee, Dec 16 '16 at 13:18
I am, but I can't downgrade the version of chrome. However, now that it's running in full-page, problem replicated. — Daedalus, Dec 16 '16 at 21:53

score 0 · Answer 1 · answered Dec 15 '16 at 12:51

0

The default style of a canvas is display:inline (or something; either way, it isn't display:block). As a result the browser adds a small amount of space below it just like it would below text. You should be able to solve this by adding display:block to the canvas's style.

answered Dec 15 '16 at 12:51

Yemachu

144
5

Spacing below the element is not the issue. The blank line is *on* the canvas. – feklee Dec 15 '16 at 15:36
Maybe I should have tested the problem some more before posting... However when saving the image as a png, there does not appear to be a white/transparent line below it. Also when zooming in/out the line appears and disappears. Might be an issue with flex. – Yemachu Dec 15 '16 at 16:00
Add `background: red` to the canvas, and the blank line will turn red. – feklee Dec 15 '16 at 16:07

Cannot draw on part of canvas

1 Answers1