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 つの変数 i と j を四角形ごとに固有となる 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

ブラウザーの互換性

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

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

関連情報