CONTEXT:
I am trying to make a light source using ray casting, that the player can use in a randomly generated maze. The rays cast from the mouse pointer. The radial gradient that I’m using changes their colour from white (the light) to black (to simulate darkness).

The problem:
The problem that I’m having is that the ctx.createRadialGradient() isnt making the lines transparent, and is rather just a solid white colour, and I cant see the other stroke lines through the transparency of the white colour.

The goal:
I want the player to be unable to see other ctx.stroke() lines when the gradient of the line is black, but when the gradient of the line is still a transparent white, I want to be able to actually see the other ctx.stroke() lines.

WORTH NOTING: there are exactly 1,000 rays that are being cast to create a circle (using rays).

Code:

const x = this.rays[i].x
const y = this.rays[i].y
const color0 = this.rays[i].radialGradient.colorStop0 // this color is white;
const color1 = this.rays[i].radialGradient.colorStop1 // this color is black;
const radius = this.circularRayRadius // the radius is equal to 200;
gradient = this.ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, color0);
gradient.addColorStop(1, color1);