Change gradient transparency for transparent arc on HTML5 Canvas

Question

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

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 any way now to give the whole arc transparency that affects only the arc and not one of the rest of the canvas?

thanks

Answer 1

Unlike SVG or HTML, there are no layers or groupings on the HTML canvas. You cannot wrap your arc / gradient in another element with lower opacity; you must propagate opacity (or tinting, or something else), down to the final properties.

Your color #1f0000 equivalent to rgb(31,0,0) ; use rgba to reduce 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+')'); 

Answer 2

You can make the color at the end of the rgba color and give it transparency this way.