過去バージョン

Canvas における色の指定

HTML5 の Canvas API で図形に色を付けるには、2 つのプロパティを使い分けます。

どちらも CSS と同じ形式の文字列、またはグラデーション / パターンオブジェクトを受け取ります。

色の表現形式 (すべて CSS 互換)

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

// 16 進
ctx.fillStyle = "#ff0000";
ctx.fillStyle = "#f00";

// rgb() / rgba()
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

// hsl() / hsla()
ctx.fillStyle = "hsl(0, 100%, 50%)";

// 色名
ctx.fillStyle = "tomato";

// 塗ってみる
ctx.fillRect(10, 10, 100, 60);

透明度 (globalAlpha)

ctx.globalAlpha は0.0 (完全透明) 〜 1.0 (不透明) の値で、その後のすべての描画にかかります。色側で rgba() の透明度も指定した場合は掛け算されます。

// 半透明な赤い四角を 2 枚重ねる
ctx.globalAlpha = 0.5;

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 100);

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

// 描画後は元に戻すのが基本
ctx.globalAlpha = 1.0;

線形グラデーション

createLinearGradient(x0, y0, x1, y1) で開始点と終了点を直線で結び、その軸に沿ったグラデーションを作ります。色の中継地点は addColorStop(offset, color) で追加します。

// 横方向 (左→右) のグラデーション
const grad = ctx.createLinearGradient(0, 0, 300, 0);
grad.addColorStop(0,    "red");
grad.addColorStop(0.5,  "yellow");
grad.addColorStop(1,    "green");

ctx.fillStyle = grad;
ctx.fillRect(0, 0, 300, 100);

円形 (放射状) グラデーション

createRadialGradient(x0, y0, r0, x1, y1, r1) は2 つの円を指定し、その間で放射状にグラデーションを作ります。一般的には内側を小さい円、外側を大きい円にします。

// 中心が白、外側が青の球体風
const rgrad = ctx.createRadialGradient(150, 100, 10, 150, 100, 80);
rgrad.addColorStop(0,   "white");
rgrad.addColorStop(0.7, "skyblue");
rgrad.addColorStop(1,   "navy");

ctx.fillStyle = rgrad;
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.fill();

パターン (画像の繰り返し塗り)

色やグラデーションだけでなく、画像で塗りつぶすこともできます。

const img = new Image();
img.src = "tile.png";
img.onload = () => {
    const pattern = ctx.createPattern(img, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, 400, 300);
};
// repeat / repeat-x / repeat-y / no-repeat

よく使うパターンまとめ

FAQ

Q: グラデーションは使い回せる？
A: 生成した CanvasGradient オブジェクトは何度でも代入できます。座標が固定なので、サイズが変わる場合はサイズ変更時に作り直してください。

Q: globalAlpha と rgba() の透明度どちらを使う？
A: 個別の描画に対する透明度は rgba()、画面全体や一連の描画にまとめてかけたいなら globalAlpha が便利です。

Q: 16 進と CSS 色名どちらが速い？
A: 体感差はほぼゼロ。可読性とコードルールで選んで構いません。

Q: addColorStop の offset を 0〜1 の外に指定したら？
A: 仕様上は例外 (IndexSizeError) が投げられます。範囲内に収めてください。

Q: 描画後にグラデーションを動的に変えたい
A: グラデーションオブジェクトを再生成し、再度 fillStyle に代入して再描画します。途中で色を入れ替えるような直接編集 API はありません。

典型的な落とし穴

まとめ

Canvas における色指定は、strokeStyle / fillStyle と globalAlpha、それにグラデーション / パターンを組み合わせれば、ほぼすべての見た目を表現できます。座標と色の関係を把握し、再描画のたびに必要なオブジェクトを再生成する基本を押さえれば、複雑なビジュアル表現も難なく構築できます。

関連

• Canvas のパス (beginPath / moveTo / lineTo / arc)
• fillRect / strokeRect — 矩形の塗り・枠線
• globalCompositeOperation — 合成モード