Home Is it possible to place an element that takes up the full viewport over a canvas without blocking the canvas's ability to interact with the pointer?

Questions

Is it possible to place an element that takes up the full viewport over a canvas without blocking the canvas's ability to interact with the pointer?

byMR

June 27, 2022

I want to overlay a section element that takes up the entire viewport on top of a canvas element. The canvas element is displaying webgl that interacts with the mouse location through javascript. Unfortunately, the section element is blocking the javascript from recognizing the mouse location because it doesn’t come in contact with the canvas.

Attempted the following solutions: I added pointer-events: none; to the section and h1 elements, but it didn’t help.

It is important that the section element take up the entire viewport because I intend to add css animations and a graphic inside of it later that must be centered using flexbox.

Is what I’m trying to do even possible and if so, how can I achieve this?

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/webgl-fluid@0.0.4/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>

>Solution :

If you set position absolute on the section the mouse events are not captured.

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  position: absolute;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/webgl-fluid@0.0.4/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>