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

Here I have an arc with some transparenc开发者_Go百科y 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

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+')');

You could make the color stop at the end an rgba color and give it transparency that way.