Javascript画布一个带有不同strokeStyle的阴影

Question

我希望有一个阴影用于大量的圆点，这些圆点与不同的strokeStyles搭配。我不想看到其他点上方的阴影。那么有没有办法为一条路径设置不同的strokeStyles，或者有没有办法将一个阴影应用于多条路径？ JSFiddle

＆＃13;

＆＃13;

     var ctx = document.getElementById('canvas').getContext('2d');
     ctx.shadowColor = "black";
     ctx.shadowBlur = 10;
     ctx.lineWidth = 30;
     ctx.lineCap = 'round';

      //This is how I want the shadow to appear
     ctx.beginPath();
     ctx.moveTo(50, 50);
     ctx.lineTo(50, 50);
     ctx.moveTo(70, 50);
     ctx.lineTo(70, 50);
     ctx.strokeStyle = 'red';
     ctx.stroke();

      //But I want to have different strokeStyle.
      //And I don't want the shadow on top the other dot
     ctx.beginPath();
     ctx.moveTo(50, 100);
     ctx.lineTo(50, 100);
     ctx.strokeStyle = 'red';
     ctx.stroke();

     ctx.beginPath();
     ctx.moveTo(70, 100);
     ctx.lineTo(70, 100);
     ctx.strokeStyle = 'white';
     ctx.stroke();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;