Javascript 画布：形状+；阴影

我需要画一个形状，然后添加阴影，但阴影在填充的颜色上，我需要它在它下面。。我不能很好地解释这种情况，所以这里有一个关于JSFIDLE的例子

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;     
context.fillStyle = "#8ED6FF";
context.strokeStyle = "#0000ff";     
context.shadowColor = "#000000";
context.shadowBlur    = 2;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();     
context.stroke();

thx

注意：我所做的只是重新安排上下文调用并添加一个

globalCompositeOperation

p、 这看起来更好：

---

p、 这是因为你抱怨这个差距：

@DC\uu你使用的是旧的（或糟糕的）浏览器吗？接受一些答案@Issam Zoli-如果你接受一些，你会得到更好的答案…不，我得到的是404页。它对你有用吗？实际上，它允许基本的混合模式-比如Photoshop^^ ^ ^ ^但是在形状和阴影之间有一个空间！！只需确保返回到：

context.globalCompositeOperation=“source over”-这是默认值^_^