How to make a element fit entire screen instead of viewport

Question

I've been trying to overlay a canvas onto an entire page on a website, but I'm facing some difficulties in doing so.

There are many similar questions but all of them suggested the usage of height/width 100% and position fixed, to give the illusion that the canvas/element is overlaid on the entire site.

However, that's not what I'm trying to achieve, because I'm trying to save the exact position that the a drawing was made on the canvas with respect to the page, hence it is necessary for me to span it beyond the viewport, supposing that the screen exceeds it.

Is there a good way to do this? Here is the code:

css

.canvas-container {
    position: fixed !important;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    ...
    <title>React App</title>
  </head>
  <body>
    <canvas id='${id}'></canvas> <---- Here's the canvas
    <div id="root"></div>
</body>
</html>

Modern CSS also provides `vw` and `vh` as relative units representing 1% of the view width and height. For example, `50vw` is 50% of the view width. — Ouroborus, Dec 23 '20 at 22:52

How to make a element fit entire screen instead of viewport

0 Answers0