javascript - Multiple text shadows in 2d canvas -

in css, can chain multiple definitions in text-shadow property achieve effects such glow:

.green-glow {      padding:20px 40px 40px;      font-family:'georgia';      font-size:70px;      background-color:#000;      color: #fff;      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0f0, 0 0 70px #0f0, 0 0 80px #0f0, 0 0 100px #0f0, 0 0 150px #0f0;  }

<div class="green-glow">glow</div>

i achieve similar effects when drawing text on canvas element using canvasrenderingcontext2d.filltext since shadow definitions split among multiple properties (shadowblur, shadowcolor, etc.), not obvious me adequate way chain multiple shadows.

i can multiple calls canvasrenderingcontext2d.filltext, 1 each defined shadow following snippet shows...

// context  var ctx = document.queryselector('#test').getcontext('2d');    // clear background black  ctx.fillstyle = '#000'  ctx.fillrect(0, 0, 500, 150);    // common font attributes  ctx.font = "70px georgia";  ctx.fillstyle = 'white';    // apply multiple shadows    ctx.shadowcolor = '#fff';  ctx.shadowblur = 10;  ctx.filltext('glow', 50, 90);    ctx.shadowblur = 20;  ctx.filltext('glow', 50, 90);    ctx.shadowblur = 30;  ctx.filltext('glow', 50, 90);    ctx.shadowcolor = '#0f0';  ctx.shadowblur = 40;  ctx.filltext('glow', 50, 90);    ctx.shadowblur = 70;  ctx.filltext('glow', 50, 90);    ctx.shadowblur = 80;  ctx.filltext('glow', 50, 90);    ctx.shadowblur = 100;  ctx.filltext('glow', 50, 90);    ctx.shadowblur = 150;  ctx.filltext('glow', 50, 90);

canvas {      width: 500px;      height: 150px;  }

<canvas id="test" width="500" height="150"></canvas>

... , though doesn't quite same me, enough purposes. wondering possible performance issues caused multiple calls filltext , whether there more appropriate way apply multiple text shadows on canvas.

thanks!