JavaScriptのCanvas APIのstrokeRect()メソッドで、矩形の輪郭を描く方法を解説します。【JavaScript】Canvasに長方形を描画する方法で紹介したのは塗りつぶされた矩形でしたが、今回紹介するのは輪郭のみを描画する方法となります。

目次 [ close ]
  1. 下準備
  2. strokeRect()で矩形の輪郭を描画
  3. strokeRect()の仕様
  4. strokeStyleプロパティで線の色を指定

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

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

jsにてコンテキストを取得します。

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

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を指定してあります。

strokeRect()で矩形の輪郭を描画

jsに以下のコードを追加して矩形を描画します。

ctx.strokeRect(10, 10, 80, 80);
矩形の輪郭を描画

strokeRect(x, y, width, height)のように引数を指定すると、原点（左上）からx、yの位置に指定したサイズの矩形の輪郭が描画できます。線の太さは既定で1pxですが、lineWidthプロパティで変更することができます。以下のコードをstrokeRect()の前に追加してみましょう。

ctx.lineWidth = 10;
線の太さを10pxに変更

線の太さが10倍になりました。

strokeRect()の仕様

細い線で描画した時の画像を拡大すると以下のように線がぼやけています。

拡大した矩形の輪郭

これは、strokeRect()が原点からx、y[px]の距離を移動した位置を中心に線を描画するためで、9.5pxから10.5px目にかけて1pxの線が描画されるため、9pxと10px目に中間色が描画されるためです。気になる場合は以下のようにすることでこれを回避できます。

ctx.strokeRect(10.5, 10.5, 80, 80);
線がくっきり

拡大しないと違いが分かりにくいですが線がくっきりしました。

太い線で描画したほうは太さが偶数のため、線がピクセルの半端な位置に重ならないためぼやけません。x、yともに10pxの位置に太さ10pxの矩形を描画しているのに、上、左に5pxずつの余白が生まれるのはこの仕様のためです。

strokeStyleプロパティで線の色を指定

strokeStyleプロパティで線の色を指定することができます。

ctx.strokeStyle = 'green';
線の色を変更