在html5中在画布上创建血液幻灯片

Question

我是帆布新手并致力于制作简单的血液滑梯，使用透明矩形，中间有渐变圆，从深红色到浅红色。我遇到的问题是，虽然画布是我想要的透明蓝色，但我希望血圈不那么透明。如何保持透明背景并在其上方仍有可见的渐变圆？ 这是我的代码到目前为止的样子：

<canvas id="myCanvas" width="300" height="100" 
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(150, 50, 5, 150, 45, 50);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.globalAlpha = .1;
ctx.fillRect(0, 0, 300, 150);

</script>

感谢您抽出宝贵时间回答。