Browser test 2 by EE2dev

index.html

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>    
        <script src="https://d3js.org/d3.v5.min.js"></script>
      <style>
        body {
          margin: 0;
        }

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

      </style>
    </head>

    <body>
      <div class="chart"></div>
      <script>
        let chart = d3.select("div.chart");
        const width = chart.style("width");
        const height = chart.style("height");
        
        console.log("w: " + width);
        console.log("h: " + 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, width, height);
        context.fillRect(10, 10, 200, 200);
      </script>
    </body>
</html>