JavaScriptのCanvas APIのrect()メソッドを使い、矩形のパスを描画する方法を解説します。

目次 [ close ]
  1. 下準備
  2. rect()メソッドで矩形を描画

下準備

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

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

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

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

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

rect()メソッドで矩形を描画

jsに以下のコードを追加するとパスによる矩形を描画できます。

ctx.beginPath();
ctx.rect(10, 10, 80, 80);
ctx.stroke();
パスによる矩形の描画

【JavaScript】strokeRect()でCanvasに矩形の輪郭を描くで紹介した方法とは違い、ここではパスを作成した後にstroke()もしくはfill()にてまとめて図形を描画します。stroke()の直前に以下のコードを追加すると2つの矩形を同時に描画します。

ctx.rect(20, 20, 80, 80);
連続する2つの矩形