JavaScriptでCanvasに線を描画する際に、stroke()メソッドの使い方でエラーが発生する場合があります。この記事では、stroke()メソッドの正しい使い方と一般的なエラーの解決方法について解説します。

stroke()メソッドの基本的な使い方

stroke()メソッドは、Canvas上で定義したパスに沿って線を描画するために使用します。以下が基本的な使用例です：

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

ctx.beginPath();     // パスの開始
ctx.moveTo(50, 50);  // 開始点の設定
ctx.lineTo(200, 50); // 終点の設定
ctx.stroke();        // 線の描画

よくあるエラーと解決方法

1. 線が表示されない

最も多いエラーは線が表示されない問題です。主な原因と解決方法は以下の通りです：

  • 原因1: beginPath()の忘れ
// ❌ 間違った例
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

// ✅ 正しい例
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
  • 原因2: Canvasのサイズ設定ミス
// ✅ Canvasのサイズを正しく設定
canvas.width = 500;
canvas.height = 300;

2. 線のスタイル設定

線の色や太さが期待通りでない場合は、以下のプロパティを使用して設定します：

ctx.strokeStyle = '#000000';  // 線の色を設定
ctx.lineWidth = 2;           // 線の太さを設定（ピクセル単位）

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

3. 複数の線を描画する

複数の線を描画する際は、それぞれの線でbeginPath()を呼び出す必要があります：

// 1本目の線
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

// 2本目の線
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(200, 100);
ctx.stroke();

stroke()メソッドの応用例

破線の描画

setLineDash()メソッドを使用して破線を描画できます：

ctx.setLineDash([5, 5]); // 破線のパターンを設定
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

線の角の形状設定

lineJoinプロパティを使用して線の接続部分の形状を設定できます：

ctx.lineJoin = 'round'; // 'round', 'bevel', 'miter'から選択

まとめ

stroke()メソッドを使用する際は以下の点に注意しましょう：

  • 必ずbeginPath()でパスを開始する
  • 適切なCanvasサイズを設定する
  • 線のスタイル（色、太さ）は描画前に設定する
  • 複数の線を描画する場合は、それぞれでbeginPath()を呼び出す

これらの基本を押さえることで、多くのエラーを防ぐことができます。