JavaScriptでのcanvasの線の色の変更

では、輪郭線（ストローク）と塗りつぶし（フィル）の色を変更する方法を学びましょう。そのためには次のプロパティがあります: プロパティ strokeStyle は輪郭線の色を設定し、プロパティ fillStyle は塗りつぶしの色を設定します。色は通常の CSS フォーマットで設定します。

例

rect を使って輪郭線を描き、赤色に塗ってみましょう:

<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

rect を使って四角形を描き、緑色に塗りつぶしてみましょう:

<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

重要: strokeStyle または fillStyle を設定すると、新しい値はそれ以降に描画されるすべての図形に適用されます。異なる色が必要な図形ごとに、fillStyle または strokeStyle の値を上書きする必要があります。