CanvasRenderingContext2D: shadowColor プロパティ

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.shadowColor プロパティは、影の色を設定します。

描画時の影の不透明度は、塗りつぶしでは fillStyle の色の、線の描画では strokeStyle の色の影響を受けることを覚えておいてください。

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

CSS<color> の値として解析される文字列です。デフォルト値は完全に透明な黒です。

図形に影を加える

この例では、2 個の正方形に影を加えます。正方形のうち 1 個は塗りつぶされ、もう 1 個は線で描かれます。shadowColor プロパティで影の色を設定し、shadowOffsetXshadowOffsetY で影の図形からの相対位置を設定します。

HTML

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

JavaScript

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

// 影
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// 塗りつぶす長方形
ctx.fillRect(20, 20, 100, 100);

// 線で描く長方形
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

結果

半透明な図形の影

影の不透明度は (shadowColor では完全に不透明な値を設定していても) 親オブジェクトの透明度の影響を受けます。この例では、半透明の色の長方形を線で描き、塗りつぶしを行います。

HTML

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

JavaScript

塗りつぶす影のアルファ値は .8 * .2 すなわち .16 になります。線で描く影のアルファ値は .8 * .6 すなわち .48 になります。

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

// 影
ctx.shadowColor = "rgba(255, 0, 0, .8)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// 塗りつぶす長方形
ctx.fillStyle = "rgba(0, 255, 0, .2)";
ctx.fillRect(10, 10, 150, 100);

// 線で描く長方形
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(0, 0, 255, .6)";
ctx.strokeRect(10, 10, 150, 100);

結果

仕様書

Specification
HTML
# dom-context-2d-shadowcolor-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shadowColor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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);

関連情報