Html a中的文本<；部门>；在画布上-引导

我正在使用bootstrap，并试图将

元素放在

元素之上，以便覆盖一些文本

    <div class="container-fluid" id="div_p5canvas">
        <div class="row">
            <div class="text-center">
                <canvas id="mymap" data-processing-sources="mymap.pde" style="height:auto; width:auto; focus { outline: 0; }" tabindex="1"></canvas>
            </div>
        </div>
    </div>

运行processing.js草图的画布

理想情况下，如果可能的话，屏幕对点击是“透明的”，允许与下面的画布进行交互

---

画布将根据浏览器窗口的大小自动调整大小。是否有方法获取画布元素大小并将div与之匹配？

我不知道如何使用html，所以我写了自己的：

<div class="wrapper">
  <canvas id="canvas" width=640 height=480></canvas>
  <div class="overlay">
    <h1>Hello there</h1>
  </div>
</div>

小心指针事件：无；由于浏览器支持不是最好的：

---

谢谢，我意识到我忽略了一点，那就是画布的大小会随着窗口的大小而动态调整。是否有一种方法可以获得画布的大小并为其设置一个div？

.wrapper {
  position: relative;
  width: 640px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  pointer-events: none;
  border: 2px solid red;
}