Expanding canvas to full browser window

Question

I want to set a div to have the size of the browser window and add a canvas to it which has the same size.

After reading the related stackoverflow questions, I set the size of the div with

div.chart {
      position: relative;
      height: 100vh;
      width: 100vw;
    }

and append a canvas with

 let chart = d3.select("div.chart");
    const width = chart.style("width");
    const height = chart.style("height");

 let canvas = chart
      .append('canvas')
      .attr('width', width)
      .attr('height', height);

However, the result is, that the browser window has horizontal and vertical scroll bars.

Looking at the dimensions from the console:

Looking at the dimension of the div.chart:

Looking at the dimension of the canvas:

The complete example is here

Here are my questions:

1. How do I add a full browser window div and append a same size canvas such that no scroll bars show up ?
2. Why does the console screenshot show that the width and height attributes of the canvas don't match the .getBoundingClientRect() ?

Answer 1

The scroll bars appear because of the body element's default top left and right margins. This is often of the order of 8px each, so a widths and heights of 100vw + 8px, and 100vh + 8px require scroll bars.

Removing the body/html margins, or using a div with position fixed with top and left values of 0 should remove the scroll bars.

The width and height attribute values of an HTMCanvasElement should be whole numbers - they set the size of the array buffer used to store canvas pixel data. I'm not sure that this is the case in the post - the width and height of the canvas seem to be set to some fractional CSS pixel values obtained from a chart.style object. How these are handled in practice is uncertain. I would expect them to be rounded down, and the bounding rectangle calculation to return dimensions in CSS pixels to reflect how the canvas has been scaled to fit the screen.

You have empirical evidence that the value used to set the canvas width and height (which I would expect to be converted to integers when determining the canvas's image size) don't match the CSS pixel values calculated for fitting the canvas to screen. I don't really find that surprising.

Answer 2

your attempt of filling it with width and height is close, except the they have string values ( like 200px )

use parseInt() to extract the int value :

context.fillRect(0, 0, parseInt(width), parseInt(height));

and for the canvas : add display:block to make it behave like one and get rid of the scroll bars.

let chart = d3.select("div.chart");
const width = chart.style("width");
const height = chart.style("height");


let canvas = chart
  .append('canvas')
  .attr('width', width)
  .attr('height', height);  

var context = canvas.node().getContext('2d');

context.fillStyle = "steelblue";
context.fillRect(0, 0, parseInt(width), parseInt(height));
// context.fillRect(0, 0, width, height);

body {
  margin: 0;
}

div.chart {
  position: relative;
  height: 100vh;
  width: 100vw;
}

canvas{
  display: block;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="chart"></div>

Answer 3

Do you maybe just need to hide the scrolls bar?

From css:

body {overflow: hidden}

Dynamically with js:

document.body.style.overflow ="hidden"

document.body.style.overflow ="auto"