CanvasRenderingContext2D.strokeStyle

Canvas 2D API のCanvasRenderingContext2D.strokeStyle プロパティは、図形の輪郭に使用する色、グラデーション、またはパターンを指定します。デフォルト値は #000 (黒色)です。

輪郭と塗りつぶしのスタイル例については、 canvas チュートリアルスタイルと色を適用する をご覧ください。

構文

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;

オプション

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

図形の輪郭色を変更する

このサンプルでは青色の輪郭を矩形に適用します。

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, 100, 100);

実行結果

ループを使用した複数の輪郭色の作成

この例では2つの for ループと、 arc() メソッドを使用して、それぞれが異なる輪郭色を持つ円のグリッドを描画します。 このためには、2つの変数 ij を円ごとに固有となるRGB色を生成するために使用し、また緑色と青色の値だけを変更するようにします (赤色は固定値とします) 。

var ctx = document.getElementById('canvas').getContext('2d');

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.strokeStyle = `rgb(
        0,
        ${Math.floor(255 - 42.5 * i)},
        ${Math.floor(255 - 42.5 * j)})`;
    ctx.beginPath();
    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
    ctx.stroke();
  }
}

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

ScreenshotLive sample

仕様

仕様書 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.strokeStyle の定義
現行の標準  

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
strokeStyleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

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

setStrokeColor(color, optional alpha);
setStrokeColor(grayLevel, optional alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);

関連情報