0

I'm looking to set up an html page in which I show some text and a html canvas. The text would go above the canvas and some extra text could go to one side. Respectively, A and B in this diagram.
A solution using css only would be preferred but I have no issue in using js. It can be assumed the text will be short enough that scrolling won't be needed.

I experimented a bit with js and getting the size of the viewport (code below) but the canvas goes beyond the viewport. And that's due to existing rules for margins. I can probably make some math with margins and that kind of stuff but I want to avoid that since it would get tricker if the page progress later on into a more complicated layout.

  • problem.html:
<html>
  <head>
    <meta charset="utf-8">
    <script src="problem.js"></script>
  </head>
  <body>
    <h1>Some fancy title</h1>
    <canvas id="my-canvas"></canvas>
  </body>
</html>
  • problem.js:
window.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('my-canvas').getContext('2d');

  // https://stackoverflow.com/a/28241682/2923526
  const width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
  const height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
  ctx.canvas.width = width
  ctx.canvas.height = height

  ctx.fillStyle = "#7fdbbb"
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
})
ffigari
  • 431
  • 6
  • 18

2 Answers2

1

You can try encapsulating the canvas in a flexbox:

<div style="display:flex; flex-direction:column; height:100%;">
    <div style="display: flex; flex: 0 1 auto;">Some fancy title</div>
    <div style="display: flex; border:1px solid red; width:100%; flex: 1 1 auto;">
        <canvas id="my-canvas" width="100%" height="100%"></canvas>
    </div>
</div>
Vinicius Stramosk
  • 106
  • 5
  • Hey @Vinicius, this almost works. The canvas is kept inside the viewport. For some reason however, the canvas is kept as a square inside that container instead of taking all the horizontal space. Can be checked by running `const ctx = document.getElementById('my-canvas').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);` in the web console – ffigari Oct 28 '21 at 13:15
  • 1
    hey @ffigari, you might have to read the `bounding rectangle` from the external DIV. `var element = document.getElementById('divcanvas'); var positionInfo = element.getBoundingClientRect(); var hx = positionInfo.height; var wx = positionInfo.width; ctx.canvas.width = wx; ctx.canvas.height = hx` – Vinicius Stramosk Oct 29 '21 at 02:02
0
                        <div style={{ display: 'grid', height: '100vh' }}  >
                         <p> upper text ..... </p>
                         <div style={{ display: 'flex' }} >
                            <p> side text of image </p>
                            <div style={{ height: '100vh' }}> html canvas codes... </div>
                         </div>
                        </div>

this piece of code can create the layout that you want.

Sharif Himu
  • 116
  • 2
  • 7
  • With this the canvas keeps the default creation size and its container is not taking all the available width – ffigari Oct 28 '21 at 13:09
  • give 100% width of canvas related div... `
    html canvas codes...
    `... give me update if the problem solved or not .     – Sharif Himu Oct 28 '21 at 15:51