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

Answer 1

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