2

I have a canvas element that I want to be a square - width set equal to height.

This works fine, however when I expand my window height as far as possible on my monitor, the corresponding growth in width pushes the sibling canvas elements off screen and a horizontal scroll bar appears.

I want to maintain my size control over this center canvas while dynamically resizing the others -- shrinking if they would go off screen.

<html>
<center>
<body bgcolor="#4c5959">
<link rel="stylesheet" href="style.css">
<center>
<div class="container">
<canvas id="info" class="panel"></canvas>
<canvas id="board" class="panel"></canvas>
<canvas id="actions" class="panel"></canvas>
</div>

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = board.width/board.height;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

  window.display.w = height;;
  window.display.h = height;
}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
</script>

.container {
  display:flex;
  height:100%;
  width:100%;
}

.panel {
  display:flex;
}

#board {
  width:50%;
  height:100%;
  background:#9b59b6;
}

#info {
  width:25%;
  height:100%;
  background:#3498db;
}

#actions {
  width:25%; 
  height:100%;
  background:#1abc9c;
}

How can I accomplish this? I have tried playing with flex-basis, flex-growth, display:inline-flex in the outer container with no results.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
quantumpotato
  • 9,637
  • 14
  • 70
  • 146

1 Answers1

1

Is this what you're looking for?

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = 1;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
body {
  background-color: #4c5959;
  margin: 0;
}
*{
  box-sizing: border-box;
}
.container {
  display:flex;
  height:100vh;
  width:100vw;
}

.side {
  flex: 1 1 25%;
  width: 25%;
}
.side canvas {
  height: 100vh;
  width: 100%;
  float: left;
}

#board {
  background:#9b59b6;
  width: 50vw;
  height: 100%;
}

#info {
  background:#3498db;
}

#actions {
  background:#1abc9c;
}
<div class="container">
  <div class="side">
    <canvas id="info"></canvas>
  </div>
  <canvas id="board"></canvas>
  <div class="side">
    <canvas id="actions"></canvas>
  </div>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • Yes, exactly, thank you! The center canvas keeps its width equal to height and the sides scale appropriately – quantumpotato Feb 14 '17 at 03:39
  • 1
    If it gets very narrow, it will still get a horizontal bar, but it's from the fact that you keep it square.You can fix that either using a `ratio` media query (making the flex go column and still keep the middle part square. – tao Feb 14 '17 at 03:41
  • What is flex 1 1 25% doing exactly? – quantumpotato Feb 14 '17 at 03:41
  • It's `flex-grow: 1; flex-shrink: 1; flex-basis: 25%;` – tao Feb 14 '17 at 03:42
  • Not exactly. It's a factor. If you set on another item `3` it will grow/shrink 3 times as much. They don't have to sum up to anything. The sum is `100%` and than gets divided proportionally. By default it's equal on all, so they all behave the same. But if the content differs, than they start from different `flex-basis` (unless it's set). So items with more content get more width/height (depending on direction). – tao Feb 14 '17 at 03:43
  • Thank you! I found an issue with the side canvases, they are not changing in width & height (staying at 300, which seems to be the default)? When I try drawing in the side canvas (actions) it shows up in the center of the screen. The inspector shows no width or height for it – quantumpotato Feb 14 '17 at 03:55
  • 1
    Canvases are weird, if you ask me. I've played with them quite a bit lately (digging into d3). I found out by far the best solution for responsive canvases is to redraw them from scratch. If they're too complex I just fade contents out and wait for resize to finish until I redraw. But, in reality, responsive canvases do not exist :) – tao Feb 14 '17 at 04:01
  • Heh, thanks! Nvm about my comment. I was drawing with the wrong context! Thank you for your help :) – quantumpotato Feb 14 '17 at 04:01