替代location.reload以重置画布

Question

当玩家失败时，将弹出一个重置按钮。当前，当单击我的重置按钮时，它是location.reload，并且我没有问题，因为它是一个简单的HTML文件。但是，当我将其上传到网站时，需要一段时间才能重新加载页面。我想要一个更快的解决方案，它将重置所有内容（画布，形状，分数），而无需重新加载页面。这是代码：

var box = 32;

      function reset() {
        location.reload();
      }
      var canvas = document.querySelector("#canvas");
      var context = canvas.getContext('2d');
      var xPos = 10;
      var yPos = 10;

      var xPos2 = 10;
      var yPos2 = 90;

      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#1aff1a";
      ctx.fillRect(xPos, yPos, 20, 20);

      var ctx2 = c.getContext("2d");
      ctx2.fillStyle = "red";
      ctx2.fillRect(xPos2, yPos2, 20, 20);

      var d = 0;
      var hit;
      var hitKey;
      var animate;
      var fps = 100;
      var now;
      var then = Date.now();
      var interval = 1000 / fps;
      var delta;

      function move(e) {
        hitKey = e.keyCode;
        if (e.keyCode == 39) {
          d = "right";
        }
        if (e.keyCode == 37) {
          d = "left";
        }
        if (e.keyCode == 38) {
          d = "up";
        }
        if (e.keyCode == 40) {
          d = "down";
        }
        iterate();
      }

      function iterate() {
        animate = requestAnimationFrame(iterate);
        now = Date.now();
        delta = now - then;

        if (delta > interval) {
          then = now - (delta % interval);
          
          if (xPos == xPos2 && yPos == yPos2 && xPos2 == 0) {
            score.value += "+";
            score.value += "3";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && xPos2 == 380) {
            score.value += "+";
            score.value += "3";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && yPos2 == 0) {
            score.value += "+";
            score.value += "3";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && yPos2 == 390) {
            score.value += "+";
            score.value += "3";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2) {
            score.value += "+";
            score.value += "1";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && xPos2 == 0 && yPos2 == 0) {
            score.value += "+";
            score.value += "5";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && xPos2 == 0 && yPos2 == 390) {
            score.value += "+";
            score.value += "5";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && xPos2 == 380 && yPos2 == 390) {
            score.value += "+";
            score.value += "5";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }
          else if (xPos == xPos2 && yPos == yPos2 && xPos2 == 380 && yPos2 == 0) {
            score.value += "+";
            score.value += "5";
            score.value = eval(score.value);
            document.getElementById('h').innerHTML = "Score: " + score.value;
            xPos2 = Math.floor(Math.random() * 38) * 10;
            yPos2 = Math.floor(Math.random() * 38) * 10;
          }

          if (xPos < 0 || xPos > 380) {
            document.getElementById("demo").innerHTML=('YOU LOST');
            document.getElementById("demo2").innerHTML=('YOUR SCORE: ' + score.value);
            document.getElementById('canvas').style.display = "none";
            document.getElementById('reset').style.display = "block";
          }
          if (yPos > 390 || yPos < 0) {
            document.getElementById("demo").innerHTML=('YOU LOST');
            document.getElementById("demo2").innerHTML=('YOUR SCORE: ' + score.value);
            document.getElementById('canvas').style.display = "none";
            document.getElementById('reset').style.display = "block";
          }

          if (hitKey != hit) {
            canvas.width = canvas.width;
            ctx.fillStyle = "#1aff1a";
            ctx.fillRect(xPos, yPos, 20, 20);
            ctx2.fillStyle = "red";
            ctx2.fillRect(xPos2, yPos2, 20, 20);
            again();
          }
        }
      }

      function again() {
        if (d == "right") {
          xPos += 10;
        }
        if (d == "left") {
          xPos -= 10;
        }
        if (d == "up") {
          yPos -= 10;
        }
        if (d == "down") {
          yPos += 10;
        }
      }





      document.onkeypress = function(e) {
        hit = e.keyCode;
      }
      document.addEventListener("keydown", move);

#canvas {
  outline:1px solid #000;
  background-color:blue;
}

<!DOCTYPE html>
<html>
<head>
  <title>Game</title>
</head>
<body>
  <input style="display:none;" id="score" type="text" name="score" value="0"><br>
  <h2 id="h">Score: 0</h2>
  <canvas id="canvas" height="410" width="400"></canvas>
  <div id="div1">
        <br><button id="reset" style="width:200px; height:68px; display:none;" onclick="reset()">Reset</button>
        <h1 id="demo"></h1>
        <h1 id="demo2"></h1>
      </div>
      <h2><u>Instructions</u></h2>
      <p>Use the left, right, up, and down arrow keys to move the green box. Try to get as many red boxes as you can before dying. Each time you get a red box, your score goes up by one. You must be directly over a red box to get it. Your round ends when when you go past the borders.</p>
</body>
</html>