Центрирование div на холсте, размер которого соответствует размерам window.innerWidth и window.innerHeight

Question

Я пытаюсь добавить текст в середину фона холста. У меня самое сложное время, чтобы понять, как добавить div в TOP OF IT, который будет поддерживать позицию путем изменения разрешения.

Для начала вот как измеряется мой холст.

var canvas = document.getElementById('first-canvas');
var ctx = canvas.getContext('2d');

initialize()

function initialize() {
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
}

function redraw() {
  ctx.strokeStyle = 'black';
  ctx.lineWidth = '5';
  ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

html,
body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  /* No floating content on sides */
}

body {
  overflow-x: hidden;
}

#btn-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

#first-canvas {
  background-color: #393939;
  overflow: hidden;
  position: relative;
}

#scroll-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0px;
  margin: 0;
  padding: 0;
  font-color: white;
  border: solid 2px white;
  width: 250px;
  height: 75px;
}

<section class="canvas">
  <canvas id="first-canvas" style="position:relative; left: 0px; top: 0px;"></canvas>
  <a href="#">
    <div id="btn-container">
      <div id="scroll-btn">
        <h3>View My Page></h3>
      </div>
    </a>
  </div>
<section>

По сути, я хочу добавить div прямо посередине холста, чтобы я мог добавить приветственный текст и сохранить прокрутку.

Answer 1

Я нашел потрясающий ответ!

div {
  background:green;
  position:fixed;
  color:#fff;
  width:50px;
  height:50px;
  top:50%;
  left:50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

Answer 2

html,
body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  /* No floating content on sides */
}

body {
  overflow-x: hidden;
}

#btn-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

#first-canvas {
  background-color: #393939;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#scroll-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 0;
  font-color: white;
  border: solid 2px white;
  width: 250px;
  height: 75px;
}
.canvas {
   width: 100%;
   height: 100%;
   position: relative;
}
a {
   display: block;
   position: absolute;
   z-index: 1;
   top: calc(100% - 37.5px);
   left: calc(100% - 125px);
}
h3 {
   margin: auto;
}