How to get LiveSever Canvas to Load html?

I've recently stared coding a js/html canvas file and I've noticed a big problem that I cannot solve. The problem is that the LiverSever extension suddenly stopped working. What I mean by this is out of random it just stopped working. When I try to open it, it opens in the browser but keeps on loading. I have tried many fixes but none of them seem to work. The html port "link" is," http://127.0.0.1:49423/index.html" So I was wondering if I could get some help?

html code below:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>

    <style>
        canvas {
        border: 1px solid lightyellow;
        background: lightyellow;

        }

        body {
            margin: 0;
        }

        .tooltip {
            width: 100px;
            position: absolute;
            top: auto;
            bottom: 800px;
            right: 887px;
            left: auto;
            font-size: xx-large;

        }
    </style>
</head>

<body>





    <canvas></canvas>

    <script src="Main_Game.js">
    </script>
    <div class="tooltip">Money:
        <script type="text/javascript">document.write(Moneys)</script>
    </div>

</body>


</html>

js code:

var canvas = document.querySelector('canvas');
canvas.width = 1920;
canvas.height = 1080;
var middlex = canvas.width/2;
console.log(middlex + " - x");
var middley = canvas.height/2;
console.log(middley + " - y");
console.log(canvas);
var c = canvas.getContext('2d');
c.fillStyle = 'rgba(255,0,0)';
c.fillRect(25,540,940,250);
c.fillRect(25, 815, 940,250);
c.fillRect(985,540,915,250);
c.fillRect(985,815,915,250);
c.beginPath();
c.arc(200, 200, 30, 0, Math.PI*2, false);
c.strokeStyle = 'blue';
c.stroke();
var Moneys = 0;
while (true) {
   Moneys += 1;
}

Solution

I do not know how to delete. I figured out that the name for the html was not the same as the js file