Изменение прозрачности градиента для прозрачной дуги на холсте HTML5

Question

Здесь у меня есть дуга с некоторой прозрачностью, примененной к одному из двух используемых им градиентов: `

ctx.arc(mouseX,mouseY,radius,0, 2*Math.PI,false);
var grd=ctx.createRadialGradient(mouseX,mouseY,0,mouseX,mouseY,brushSize); 
grd.addColorStop(1,"transparent");
grd.addColorStop(0.1,"#1f0000");
ctx.fillStyle=grd;
ctx.fill();

Есть ли способ теперь дать всей дуге некоторую прозрачность, затрагивающую только дугу и ни один изостальная часть холста?

Спасибо

Answer 1

В отличие от SVG или HTML, на холсте HTML нет наслоения или группировки.Вы не можете обернуть свою дугу / градиент в другой элемент с более низкой непрозрачностью;вы должны распространять изменения непрозрачности (или оттенка, или чего-либо еще) непосредственно до конечных свойств.

Ваш цвет #1f0000 эквивалентен rgb(31,0,0);используйте rgba, чтобы уменьшить непрозрачность этого конкретного цветового ограничителя.

var opacity = 0.55; //55% visible
grd.addColorStop(1,'transparent');
grd.addColorStop(0.1,'rgba(31,0,0,'+opacity+')');

Answer 2

Вы можете сделать остановку цвета в конце цветом rgba и таким образом придать ему прозрачность.