俺の左手に封印されしシャドウドラゴン(笑)

図形とかに影つけますよ。

context.shadowColor=colorCode

影の色を指定します。
１６進数コード・RGBコードお好きな方でどうぞ。
プロパティなので値をぶっこみましょう。
ただの色指定なのでデモは後で。

context.shadowOffsetX=data

影のx軸の位置を指定します。
0は図形の完全背後。表示図形からの距離を指定します。

context.shadowOffsetY=data

影のy軸の位置を指定します。
0は図形の完全背後。表示図形からの距離を指定します。

context.shadowBlur=data

ぼかしレベルを指定します。
0以上の整数ですが、1は1pxぼかす意味ではなくあくまでも【レベル】のお話なので注意してください。

指定時の注意

図形描画前に指定しましょう。

var canvas1 = document.getElementById('canvas01');
canvas1.width = 200;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  // 四角
  context1.beginPath();
  context1.shadowColor = "#ddd";
  context1.shadowOffsetX = "5";
  context1.shadowOffsetY = "5";
  context1.shadowBlur = "1";
  context1.fillRect(60,30,50,50);
  context1.stroke();

  // 円弧
  context1.beginPath();
  context1.shadowColor = "#ddd";
  context1.shadowOffsetX = "5";
  context1.shadowOffsetY = "5";
  context1.shadowBlur = "1";
  var startAngle = 0 * Math.PI / 180;
  var endAngle = 360 * Math.PI / 180;
  context1.arc(90, 130, 20, startAngle, endAngle, true);
  context1.stroke();
  context1.fill();

  // border
  context1.beginPath();
  context1.moveTo(30,180);
  context1.shadowColor = "#ddd";
  context1.shadowOffsetX = "5";
  context1.shadowOffsetY = "5";
  context1.shadowBlur = "1";
  var startAngle = 0 * Math.PI / 180;
  var endAngle = 360 * Math.PI / 180;
  context1.lineTo(180, 180)
  context1.stroke();
  context1.fill();
}