この記事の要点

Canvas の色指定は ctx.strokeStyle (枠線) と ctx.fillStyle (塗り) の 2 つ 色の値はCSS 互換: #rrggbb / rgb() / rgba() / hsl() / 色名すべて使える 透明度は ctx.globalAlpha (0.0 〜 1.0) で描画全体にかかる。色側 rgba() と併用可 線形グラデーションは createLinearGradient(x0,y0,x1,y1) + addColorStop() 円形グラデーションは createRadialGradient(x0,y0,r0,x1,y1,r1)。中心点と半径を 2 つ指定

Canvas における色の指定

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

プロパティ	用途
ctx.strokeStyle	図形の枠線 (ストローク) の色
ctx.fillStyle	図形の塗りつぶしの色

どちらも 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);

引数	意味
x0, y0	グラデーションの開始座標
x1, y1	グラデーションの終了座標
offset	0.0 (開始) 〜 1.0 (終了) の位置
color	その位置の色 (CSS 表記)

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

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

引数	意味
x0, y0, r0	内側の円 (中心と半径)
x1, y1, r1	外側の円 (中心と半径)

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

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

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

よく使うパターンまとめ

やりたいこと	API
単色塗り	fillStyle = "#色"
枠線色	strokeStyle = "#色"
半透明描画	globalAlpha = 0.5
線形グラデーション	createLinearGradient()
円形グラデーション	createRadialGradient()
画像で塗りつぶし	createPattern()

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 はありません。

典型的な落とし穴

症状	原因 / 対処
色が反映されない	fillStyle をfillRect の前に設定する
描画後の塗りが消える	背景全体を clearRect でクリアしている可能性
線がぼやける	HiDPI 対応: devicePixelRatio 倍の Canvas サイズを用意する
グラデが座標と合わない	Canvas のリサイズ後に再生成していない
透明度が掛け合わさる	globalAlpha と rgba() の両方を指定している

まとめ

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

関連

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