#問題7
中心が(200, 200)、半径60の円を描画しなさい。
線分は青色(#0000ff)で太さが3であること。
なお、以下のHTMLを使うこと。

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

    // 線の色を青色にする
    ctx.strokeStyle = '#0000ff';

    // 線の太さを3にする
    ctx.lineWidth = 3;

    ctx.beginPath();        // 現在のパスをリセットする
    ctx.arc(200, 200, 60, 0, Math.PI*2, true);	// 円を描画する
    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');

次に線の色と太さを指定します。
線の色はstrokeStyleで指定します。
線の太さはlineWidthで指定します。

// 線の色を青色にする
ctx.strokeStyle = '#0000ff';

// 線の太さを3にする
ctx.lineWidth = 3;

後はパスを作成し、最後にstrokeを呼びます。
本問題では、パスの始点と終点が一致しているのでclosePathを呼んでも呼ばなくても結果は同じです。

円弧の書き方ですが、
ctx.arc( x, y, 半径, 開始角度, 終了角度, 回り方)のように指定します。
x, yは円の中心点の座標を指定します。
開始角度、終了角度はラジアンで指定します。
回り方はtrueで反時計回り、falseで時計回りであり、今回はどちらを指定しても結果は同じです。

ctx.beginPath();        // 現在のパスをリセットする
ctx.arc(200, 200, 60, 0, Math.PI*2, true);  // 円を描画する
ctx.closePath();        // パスを閉じる
ctx.stroke();           // 現在のパスを描画する