Eres un traductor de español que traduce documentos de TI. Traduce lo siguiente al español. Usa la misma opacidad y color para el círculo y la línea, pero muestra un resultado extraño en el lienzo.

Estoy utilizando el mismo color para las líneas y los círculos en el lienzo, sin embargo, me está dando un efecto extraño. Me gustaría que no se muestre la línea en el círculo.

¿Por qué agregar un valor de alfa haría tanta diferencia?

Aquí está mi código:

        function draw() {

        let color = "rgba(192,192,192,0.5)";

        //dibujar círculo
        for (let i = 0; i < circleArray.length; i++) {

            let circle = circleArray[i]


            context.beginPath();
            context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            context.fillStyle = color;
            context.fill();
        };

        //dibujar línea
        context.beginPath();
        for (let i = 0; i < circleArray.length; i++) {
            let circleI = circleArray[i];
            context.moveTo(circleI.x, circleI.y);

            for (let j = 0; j < circleArray.length; j++) {
                let circleII = circleArray[j];
                if (distance(circleI, circleII) < 350) {
                    context.lineTo(circleII.x, circleII.y);
                }
            }
        }

        context.lineWidth = 2;
        context.strokeStyle = color;
        context.stroke();
    }

Esto es lo que tengo ahora.
Imagen: Aquí

Lo esperado. Esto es lo que quería, pero esto es con una opacidad de 1. Me gustaría que tuviera una opacidad de 0.5.
Imagen: Aquí