CanvasRenderingContext2D: fillStyle プロパティ

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.

CanvasRenderingContext2D.fillStyleキャンバス 2D API のプロパティで、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。既定値は #000 (黒色)です。

メモ: 輪郭と塗りつぶしのスタイル例については、キャンバスのチュートリアルスタイルと色の適用をご覧ください。

以下のいずれかです。

  • CSS の <color> 値として解釈される文字列。
  • CanvasGradient オブジェクト(線形または放射状のグラデーション)。
  • CanvasPattern オブジェクト(繰り返し画像)。

図形の塗りつぶし色を変更する

このサンプルでは青色の塗りつぶし色を矩形に適用します。

HTML

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

JavaScript

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

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

結果

ループを使用した複数の塗りつぶし色の作成

この例では 2 つの for ループでそれぞれが異なる塗りつぶし色を持つ四角形のグリッドを描画します。 このためには、 2 つの変数 ij を四角形ごとに固有となる RGB 色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。

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

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.fillStyle = `rgb(
        ${Math.floor(255 - 42.5 * i)}
        ${Math.floor(255 - 42.5 * j)}
        0)`;
    ctx.fillRect(j * 25, i * 25, 25, 25);
  }
}

結果はこのようになります:

仕様書

Specification
HTML
# dom-context-2d-fillstyle-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
fillStyle

Legend

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

Full support
Full support

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

js
setFillColor(color, /* (optional) */ alpha);
setFillColor(grayLevel, /* (optional) */ alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);

関連情報