#問題3
点(100,100)と点(300,200)を点(50,150)結ぶ三角形を線分で描画しなさい。
なお、以下のHTMLを使うこと。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問題3</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
    // ここにプログラムを書く
});
</script>
</head>
<body>
<canvas id="my-canvas" width="500" height="300"></canvas>
</body>
</html>

#答え

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問題3</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
	// コンテキストを取得
    const ctx = $('#my-canvas')[0].getContext('2d');

    ctx.beginPath();		// 現在のパスをリセットする
	ctx.moveTo(100, 100);	// パスの開始座標を指定する
	ctx.lineTo(300, 200);	// 座標を指定してラインを引く
	ctx.lineTo(50, 150);	// 座標を指定してラインを引く
	ctx.closePath();		// パスを閉じる
	ctx.stroke();			// 現在のパスの輪郭を描画する
});
</script>
</head>
<body>
<canvas id="my-canvas" width="500" height="300"></canvas>
</body>
</html>

三角形が表示されました！

#解説
コンテキストを取得します。これは問題1と同じです。

const ctx = $('#my-canvas')[0].getContext('2d');

問題2と異なり、strokeの前にclosePathを呼んで、パスを閉じています。
パスを閉じないと線分が2本表示されるだけになり、三角形にはなりません。注意しましょう。

ctx.beginPath();        // 現在のパスをリセットする
ctx.moveTo(100, 100);   // パスの開始座標を指定する
ctx.lineTo(300, 200);   // 座標を指定してラインを引く
ctx.lineTo(50, 150);    // 座標を指定してラインを引く
ctx.closePath();        // パスを閉じる
ctx.stroke();           // 現在のパスの輪郭を描画する