CanvasRenderingContext2D: shadowOffsetY プロパティ

Canvas 2D API の CanvasRenderingContext2D.shadowOffsetY は、影を縦方向にずらす距離を設定します。

メモ: 影はプロパティ shadowColor が透明でない値に設定されているときのみ描画されます。さらに、プロパティ shadowBlur、shadowOffsetX、shadowOffsetY のいずれかがゼロでない値に設定されていなければいけません。

値

影を縦方向にずらす距離を表す浮動小数点数です。正の値を設定すると下に、負の値を設定すると上にずらします。デフォルト値は 0 (縦方向にずらさない) です。Infinity や NaN は無視されます。

例

影を縦方向にずらす

この例では、長方形にぼかしがかかった影を加えます。プロパティ shadowColor で影の色を設定し、shadowOffsetY で影のオフセットを下に 25 単位に設定し、shadowBlur で影のぼかしレベルを 10 に設定します。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 影
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// 長方形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);

結果

仕様書

Specification
HTML Standard
# dom-context-2d-shadowoffsety-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報