Modifying "ALIEN Deviation" Pen - - issue with HTML canvas

[Drone4four]

I have an issue with a red (crimson) rectangular box at the bottom of the window/screen, as it appears in this image:

This issue is apparent more so at narrower resolutions.

Here is my reduced test case on CodePen.

Using Chrome’s Developer Tools on my local dev work space, I’ve pin-pointed the source of the issue to a relatively newly introduced canvas element, which I don’t fully understand. I’ve read w3school’s doc along with Chris Coyier’s blog post on HTML canvas and I don’t really understand how to use the canvas element properly.

How might you fix this? What property or value may be necessary to eliminate this red box?

Here is the original “ALIEN Deviation” that my Pen is based on.

[DaveMaxwell]

The crimson is because that is the background color on the body element. You are seeing it because the title class does not go the full height of your screen, so the rest is the body element bleeding through.

[PaulOB]

Maybe consider having the canvas at a fixed position if you always want it to cover the viewport and have content scroll over it.

e.g.

canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
  right: 0;
  bottom: 0;
  width: 100% !important;
  z-index: -1;
  position:fixed;
}

[Drone4four]

Thank you, @PaulOB! This worked. All we needed was to add the fixed value to the position property part of the .canvas class. I knew the answer was going to be trivial. Thanks again, my friend!