canvas.getContext　エラーを直したい

実現したいこと

htmlだけでモンテカルロ法を使った円周率の計算をしようとしています。

前提

ボタンを押すとなります。

発生している問題・エラーメッセージ

Uncaught TypeError: canvas.getContext is not a function
    at start ((index):25:32)
    at HTMLButtonElement.onclick ((index):17:31)
start @ (index):25
onclick @ (index):17

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>モンティ・カルロ法による円周率の計算</title>
5    <style>
6      #canvas {
7        position: absolute;
8        top: 50%;
9        left: 50%;
10        transform: translate(-50%, -50%);
11      }
12    </style>
13  </head>
14  <body>
15    <h1>モンティ・カルロ法による円周率の計算</h1>
16    <div id="canvas"></div>
17    <button onclick="start()">計算開始</button>
18    <p id="result"></p>
19
20    <script>
21      function start() {
22        const canvas = document.getElementById("canvas");
23        const width = 500;
24        const height = 500;
25        const context = canvas.getContext("2d");
26        canvas.width = width;
27        canvas.height = height;
28        context.fillStyle = "#FFFFFF";
29        context.fillRect(0, 0, width, height);
30        context.strokeStyle = "#000000";
31        context.beginPath();
32        context.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);
33        context.stroke();
34
35        let count = 0;
36        let total = 0;
37        const n = 1000000;
38        for (let i = 0; i < n; i++) {
39          const x = Math.random() * width;
40          const y = Math.random() * height;
41          const dx = x - width / 2;
42          const dy = y - height / 2;
43          if (dx * dx + dy * dy < (width / 2) * (width / 2)) {
44            context.fillStyle = "#000000"; 
45            count++;
46          } else {
47            context.fillStyle = "#00FF00"; 
48          }
49          context.beginPath();
50          context.arc(x, y, 1, 0, 2 * Math.PI);
51          context.fill();
52          total++;
53        }
54
55        const pi = (4 * count) / total;
56        document.getElementById("result").textContent = `π ≈ ${pi}`;
57      }
58    </script>
59  </body>
60</html>
61