CanvasRenderingContext2D: shadowBlur プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API の CanvasRenderingContext2D.shadowBlur プロパティは、影にかかるぼかしの量を設定します。デフォルトは 0 (ぼかしなし) です。

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

値

影のぼかしの度合いを設定する非負の浮動小数点数です。0 がぼかしなしを表し、数を大きくするとぼかしが強くなります。この値はピクセル数には対応せず、現在の変換行列の影響を受けません。デフォルト値は 0 です。負の値、Infinity、NaN は無視されます。

例

図形に影を加える

この例では、長方形にぼかしがかかった影を加えます、shadowColor プロパティで影の色を設定し、shadowBlur でぼかしの度合いを設定します。

HTML

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

JavaScript

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

// 影
ctx.shadowColor = "red";
ctx.shadowBlur = 15;

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

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

WebKit ベースおよび Blink ベースのブラウザーでは、このプロパティに加えて非標準で非推奨のメソッド ctx.setShadow() が実装されています。

js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);

関連情報