Javascript 如何在html5画布中使用径向渐变绘制具有闪烁效果的半透明圆？

我想在HTML5画布上制作这样的东西：圆圈有闪烁的光线，其阴影扩散到圆圈的远边缘。您可以看到，在图像中，虽然模糊，但在模糊阴影和圆之间仍然有一条非常清晰的线。圆圈是透明的，所以你可以看到它

但我想避免使用阴影模糊。我尝试的是使用径向梯度。但是我得到了下面的效果。虽然我尝试过用不同的数字来调整，但我无法像图中所示那样画出一个类似的圆圈

draw（document.getElementById（'canvas'）.getContext（'2d'）；
功能图（ctx）{
var radgrad=ctx.CreateAradialGradient（90,90,0,90,90,90）；
radgrad.addColorStop（0，'rgba（255,0,0,0.4'）；
radgrad.addColorStop（0.25，'rgba（228,0,0,23'）；
radgrad.addColorStop（1，'rgba（228,0,0'）；
//画图
ctx.fillStyle=radgrad；
ctx.fillRect（0,0190190）；
ctx.arc（90,90,15,0，Math.PI*2）；
ctx.fill（）；
}