同时使用填充和描边的画布阴影重叠问题

Question

如果我在形状上同时使用填充和笔触，则阴影会与其中之一重叠（取决于顺序）

在同时使用填充和笔触时如何使用阴影？

var ctx = document.getElementById("demo").getContext("2d");
ctx.fillStyle = "white";
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.shadowColor = "green";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

ctx.beginPath();
ctx.rect(20, 20, 100, 50);
ctx.fill();
ctx.stroke();                   // shadow overlaps the filled area              

ctx.beginPath();
ctx.rect(150, 20, 100, 50);
ctx.stroke();
ctx.fill();                     // shadow overlaps the stroke

https://jsfiddle.net/arpadpall21/t36vc10x/1/