如何暂停和播放画布

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var x = 0;
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 50, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
  x += 1;
  requestAnimationFrame(draw);
}
draw();

var animationId;
var isPaused = false;

function draw() {
  if (!isPaused) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, 50, 10, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
    x += 1;
    animationId = requestAnimationFrame(draw);
  }
}

canvas.addEventListener("click", function() {
  isPaused = !isPaused;
  if (!isPaused) {
    draw();
  } else {
    cancelAnimationFrame(animationId);
  }
});