構文

context . shadowOffsetX [ = value ]

context . shadowOffsetY [ = value ]

現在の影のオフセットを返します。

値をセットして、影のオフセットを変更することができます。有限数でない値は無視されます。

仕様

shadowOffsetX と shadowOffsetY 属性は、それぞれ、影が、正の水平方向、正の垂直方向のオフセットとなる距離を指定します。これらの値は座標空間の単位となります。これらは、現在の現在の変形マトリックスの影響を受けません。

コンテキストが生成されるとき、この影のオフセットの属性の値は 0 で初期化されなければいけません。

取得時には、これらの属性は、現在の値を返さなければいけません。セット時には、これらの属性は新しい値にセットされますが、その値が無限第や NaN の場合は除外され、その場合は、その値は無視されなければいけません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-shadowoffsety

サンプル

このサンプルは、shadowBlur 属性に 10 を、そして shadowOffsetY 属性に 10 をセットしたうえで、赤色の円を描いてきました。10 の幅の円のシャドーが下方向に 10 だけ移動した状態でレンダリングされます。

/* ぼかしの範囲を定義 */
ctx.shadowBlur = 10;
/* ぼかしのオフセット（垂直方向）を定義 */
ctx.shadowOffsetY = 10;
/* 円を塗る */
ctx.beginPath();
ctx.arc(50, 50, 35, 0, Math.PI*2, false);
ctx.fillStyle = "#cc0000";
ctx.fill();

[shadowOffsetY プロパティの実際のサンプル]

ブラウザ対応状況

shadowOffsetY をサポートしているブラウザは Safari と Chome 2, 3 のみです。それ以外のブラウザでは、shadowOffsetY に値をセットしても無視されます。

なお、Safari と Chrome 2, 3 では、shadowColor をセットしない場合は自動的に黒がセットされますが、Firefox 3.5 の場合は、事前に shadowColor を明示的にセットしておかないと、シャドーが表示されません。