Modifying the transparency of a gradient for a transparent arc on HTML5 Canvas

Question

Here I have an arc with some transparency applied to one of the two gradients its using:`

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();

Is there a way to now give the entire arc some transparency affecting only the arc and none of the rest of the canvas?

Thanks

Solution

Unlike SVG or HTML, there is no layering or grouping on an HTML Canvas. You can't wrap your arc/gradient in another lower-opacity element; you must propagate opacity (or tinting, or whatever) changes down to the end properties directly.

Your color #1f0000 is equivalent to rgb(31,0,0); use rgba to lower the opacity of this particular color stop.

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