Javascript canvas one shadow with different strokeStyle
<p>I want to have one shadow for a large number of dots that over lap with different strokeStyles. I don't want to see the shadow on top of the other dots. So is there a way to have different strokeStyles for one path, or is there a way to apply one shadow to multiple paths?
<a href="https://jsfiddle.net/cwtisme/rj0frpo4/" rel="nofollow">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>     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();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>