HTML5 canvasで描画オブジェクトにドロップシャドウを適用する

HTML5のcanvas APIでは、いくつかのプロパティを設定するだけで、線・塗り・画像といった描画オブジェクトに対して、簡単にドロップシャドウ効果を適用することができます。

ドロップシャドウを適用するプロパティ

描画オブジェクトに対してドロップシャドウを適用するには、コンテキストのプロパティに値を設定するだけです。shadowColorで影の色、shadowBlurでぼかしのサイズ、shadowOffsetXでX方向のオフセット、shadowOffsetYでY方向のオフセットをそれぞれ指定します。

下記の例では、シャドウのプロパティを指定した後でテキストを塗りで描画していますが、テキストに対してドロップシャドウが適用されていることが確認できます。同じように線や画像に対してもドロップシャドウを適用することができます。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  // 影の色
  context.shadowColor = 'rgba(0, 0, 0, 0.5)';
  // ぼかしのサイズ
  context.shadowBlur = 3;
  // X方向のオフセット
  context.shadowOffsetX = 0;
  // Y方向のオフセット
  context.shadowOffsetY = 2;
  // テキストを塗りで描画
  context.fillStyle = '#cc0000';
  context.font = "bold 60px 'Arial'";
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText('Hello World!', 0, 0);
  context.restore();
};