我试图在包含图像的弯曲矩形边框后面绘制阴影。但是，下面的代码将阴影放在图像后面而不是边框后面。我该如何更改此代码以使阴影在边界后面？
要澄清，边框当前被图像阴影遮蔽，但我不希望图像具有任何阴影。我想拥有阴影的是图像周围的白色边界。我不希望在画布周围有阴影，而是 curved矩形边框。
var c=document.getElementById('game'),
canvasX=c.offsetLeft,
canvasY=c.offsetTop,
ctx=c.getContext('2d')
elements = [];
var x=25, y=25, w=150, h=150;
var img=new Image();
img.src='https://i.stack.imgur.com/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);canvas {
display: block;
margin: 1em auto;
border: 1px solid black;
background: #FF9900;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uTalk Demo</title>
<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>在绘制图像之前，只需删除阴影offset即可。设置此属性时，所有后续图纸都会带有阴影。
var c=document.getElementById('game'),
canvasX=c.offsetLeft,
canvasY=c.offsetTop,
ctx=c.getContext('2d')
elements = [];
var x=25, y=25, w=150, h=150;
var img=new Image();
img.src='https://i.stack.imgur.com/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
// now reset the shadow
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);canvas {
display: block;
margin: 1em auto;
border: 1px solid black;
background: #FF9900;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uTalk Demo</title>
<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>您绘制的形状只是一个图像，而不是border。它只会保留在画布内。但是，如果您做这样的事情，则只需要使用x,y coordinates即可。否则，您可以使用border和box-shadow属性
var c=document.getElementById('game'),
canvasX=c.offsetLeft,
canvasY=c.offsetTop,
ctx=c.getContext('2d')
elements = [];
var x= 20, y=20, w=160, h=160;
var img=new Image();
img.src='https://i.stack.imgur.com/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
ctx.drawImage(img, x+27.5, y+27.5, w-55, h-55);canvas {
display: block;
margin: 1em auto;
background: transparent;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uTalk Demo</title>
<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>不确定您需要什么。我认为您的代码没有任何问题。您是否尝试使用：
ctx.strokeStyle = 'grey'; //or the color you want.
ctx.lineWidth = 5; //For thickness