I’m trying to distribute a particle effect across my entire website. The canvas only applies the effect to the size of my window, so when I scroll down the particle effect stops. I can resize the canvas to fit more of my screen, but that leads to stretching of the particle effect.

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

How would I resize the canvas to fit my entire website (including when scrolling down) without blurring the particle effect?

You can see it stops under the About Me section