имитировать свет в холсте javascript

Question

Я делаю симулятор света, где каждый луч света рассчитывается индивидуально.У меня есть проблема:

Когда я делаю луч света, который имеет цвет rgba 0 0 0 0,01, он рисует черный луч света вместо того, чтобы ничего не делать.Мне интересно, как нарисовать его, только сделав фон ярче.

Это изображение

В настоящее время свет излучает источник света в виде белого луча.затем бьет по мячу, который отклоняется только красным.Затем этот луч выстреливает в шар, который отклоняет только синий свет ... НО, поскольку луч был красным (а красный и синий не разделяют цвета RGB), я сделал его черным.Но когда этот луч стреляет из него, он рисует черный свет над моим белым светом, как видно на изображении.

Я попытался нарисовать каждый из rgb по отдельности так:

c.beginPath();
c.arc(x, y, size, 0, 2*Math.PI);
c.fillStyle = "rgba(" + red + ", 0, 0, 0.01)";
c.fill();
c.fillStyle = "rgba(0, " + green + ", 0, 0.01)";
c.fill();
c.fillStyle = "rgba(0, 0, " + blue + ", 0.01)";
c.fill();

Вотфрагмент кода того, что в настоящее время есть.(И я знаю, что некоторые вещи работают не так, как должны, но давайте сосредоточимся на проблеме света.)

var ctx = document.getElementById("myCanvas");
var c = ctx.getContext("2d");

c.fillRect(0, 0, 1400, 600);

var particles = [];
var blocks = [];
var enhansers = [];
for (i=0;i<360*4;i++)
{
	particles.push( new Particle(300, 300, i/4, [255, 255, 255]) );
}

blocks.push( new Block(100, 300, 60, [0, 0, 255]) );
blocks.push( new Block(500, 300, 60, [255, 255, 0]) );


setTimeout('update()', 4000);

function Block(x, y, size, rgb)
{
	this.size = size;
	this.x = x;
	this.y = y;
	this.rgb = rgb;
	c.beginPath();
	c.arc(x, y, size, 0, 2*Math.PI);
	c.setLineDash([5, 3]);
	c.strokeStyle = "green";
	c.stroke();
}
function Enhanser(x, y, size, en)
{
	this.size = size;
	this.x = x;
	this.y = y;
	this.en = en;
	c.beginPath();
	c.arc(x, y, size, 0, 2*Math.PI);
	c.setLineDash([5, 3]);
	c.strokeStyle = "orange";
	c.stroke();
}
function Particle(x, y, deg, rgb)
{
	this.angle = deg;
	this.light = 0.06;
	this.size = 4;
	this.speed = 4;
	this.delight = 1.0001;
	this.x = x;
	this.y = y;
	this.rgb = rgb;
}

function update(n)
{
	for (i=0;i<particles.length;i++)
	{
		particles[i].light /= particles[i].delight;
		particles[i].x += Math.cos( particles[i].angle ) * particles[i].speed;
		particles[i].y += Math.sin( particles[i].angle ) * particles[i].speed;
		
		c.beginPath();
		c.arc(particles[i].x, particles[i].y, particles[i].size, 0, 2*Math.PI);
		c.fillStyle =
			"rgba(" + particles[i].rgb[0]
			+ "," + particles[i].rgb[1]
			+ "," + particles[i].rgb[2]
			+ "," + particles[i].light + ")";
		c.fill();
		
		if (/*(particles[i].rgb[0] == 0 && particles[i].rgb[1] == 0 && particles[i].rgb[2] == 0) || */particles[i].light < 0.005 || particles[i].x > 1400 || particles[i].x < 0 || particles[i].y < 0 || particles[i].y > 600)
		{
			particles.splice(i, 1);
			i --;
		}
		else
		{
			for (j=0;j<blocks.length;j++)
			{
				if ( Dist(particles[i].x, particles[i].y, blocks[j].x, blocks[j].y) < particles[i].size + blocks[j].size )
				{
					particles[i].speed *= -1;
					
					particles[i].x += Math.cos( particles[i].angle ) * particles[i].speed;
					particles[i].y += Math.sin( particles[i].angle ) * particles[i].speed;
					
					if (particles[i].rgb[0] > 255 - blocks[j].rgb[0])
					{
						particles[i].rgb[0] = 255 - blocks[j].rgb[0];
					}
					if (particles[i].rgb[1] > 255 - blocks[j].rgb[1])
					{
						particles[i].rgb[1] = 255 - blocks[j].rgb[1];
					}
					if (particles[i].rgb[2] > 255 - blocks[j].rgb[2])
					{
						particles[i].rgb[2] = 255 - blocks[j].rgb[2];
					}
					break;
				}
			}
			for (j=0;j<enhansers.length;j++)
			{
				if ( Dist(particles[i].x, particles[i].y, enhansers[j].x, enhansers[j].y) < particles[i].size + enhansers[j].size )
				{
					particles[i].delight = (particles[i].delight-1)/(enhansers[j].en+1) + 1;
					
					break;
				}
			}
		}
	}
	if (particles.length > 0)
	{
		setTimeout('update()', 10);
	}
}
function Dist(x1, y1, x2, y2)
{
	return Math.sqrt( Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) );
}

<!doctype html>
<head>

<title> Light </title>

<style>



</style>
</head>
<body>


<canvas id="myCanvas" width="1400" height="600" style="border:1px solid #000000;">
</canvas>

<script type="text/javascript" src="Light.js"></script>

</body>
</html>