How to stop a requestAnimationFrame on canvas in JavaScript

Question

little question. After googling how to do this for 8 hours a day, nothing. Please let me know how to stop a requestAnimationFrame: simply, just temporarily pause the animation:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<head>
<title>Parking Master LVL. 1</title>
</head>
<body>
<h3 id="header-style">Parking Master</h3>
<p class="paraGraph1">How to play:</p>
<ol id="directions">
<p>1. drive into the Green Outlined Square</p>
<p>2. do not crash through the process or the game ends!</p>
<p>3. press "<span><button style="position: relative;
top: -3px;
color: #11fc05;
border: 2px double #11fc05; width: 1.2em; height: 1.2em;"><span style="position: absolute; left: 4px;top: 0px; font-size: 0.6em;">Park</span></button></span>" when you parked in the correct spot.</p>
</ol>
</body>
<link rel="stylesheet" href="style.css">
<!--Game-->
<canvas id="myCanvas" width="600" height="400"
style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<button style="position:absolute;left:550px;top:600px;" class="buttonDrive" onmousedown="mouseDown()" onmouseup="mouseUp()">Drive</button>

<button class="buttonPark" onclick="parkDetector()" style="position: absolute;left: 550px; top: 540px;"><strong>Park</strong></button>
<div id="Car-Body">
<script>
var canvas = document.getElementById('myCanvas'),
 ctx = canvas.getContext('2d'),
 x = 0,
 last = performance.now();

function draw(timestamp) {
requestAnimationFrame(draw);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(x, 20, 20, 20);
ctx.fillStyle = "#000000";
ctx.fill();

x += (timestamp - last) / 10;
last = timestamp;
}
</script>
</div>
<script>
var continueAnimating=true;
var carBody = document.getElementById("Car-Body");

// detect if car is parked
function parkDetector() {
if (carBody > 0) {

// If the car Parked in the correct spot
carIsParked();
}
}

// If the car is not parked in the correct spot
if (carBody < 176) {
function carIsNotParked() {
alert("Hmm... it doesn't seem like you parked!");
}
}
function carIsParked() {
alert("You Parked!");
document.body.innerHTML+=p;
document.body.innerHTML+='<button onclick="nextLevel()">Next Level</button>';
}
// Direct the car
var p = '<div></div>';

// Redirect to Next Level
function nextLevel() {
document.getElementsByClassName().innerHTML = '<a href="https://sites.google.com/view/parking-master-lvl2">Next Level</a>';
}
function mouseUp() {
console.log('wow'); // if the "Drive" button is let go of, cancel the animation
}
function mouseDown() {
requestAnimationFrame(draw); // if "Drive" is pressed, draw the animation

}
</script>

Basically when the mouseDown Is functioned, it should trigger the requestAnimationFrame, which it does, but when mouseUp Event is triggered, it should stop the animation. I am new to javascript, and never did jQuery, please help.

score 1 · Answer 1 · answered Jun 26 '21 at 15:05

You can change those functions like that :

var shouldDraw=false //Defines a new variable that will allow to draw or not

function draw(timestamp) {
   if(!shouldDraw) return //Test if you should draw or not, if it is equal to true, the draw function continues as it should, otherwise it stops and isn't called again
   requestAnimationFrame(draw);

   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.beginPath();
   //The rest of your function...
}

function mouseUp() {
   console.log('wow'); // if the "Drive" button is let go of, cancel the animation
   shouldDraw=false //Says that you don't draw anymore
}

function mouseDown() {
   shouldDraw=true //Says that you can draw now
   requestAnimationFrame(draw); // if "Drive" is pressed, draw the animation
}

score 1 · Accepted Answer · answered Jun 26 '21 at 15:47

You can use cancelAnimationFrame() to stop the animation. You can assign requestAnimationFrame() to a variable and then to stop the animation call that variable in the cancel function. You also don't need to call requestAnimationFrame() in the mouseDown function since just calling draw() will trigger it to be activated.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />

  <head>
    <title>Parking Master LVL. 1</title>
  </head>

<body>
  <h3 id="header-style">Parking Master</h3>
  <p class="paraGraph1">How to play:</p>
  <ol id="directions">
    <p>1. drive into the Green Outlined Square</p>
    <p>2. do not crash through the process or the game ends!</p>
    <p>3. press "<span><button style="position: relative;
top: -3px;
color: #11fc05;
border: 2px double #11fc05; width: 1.2em; height: 1.2em;"><span style="position: absolute; left: 4px;top: 0px; font-size: 0.6em;">Park</span></button></span>" when you parked in the correct spot.</p>
  </ol>
</body>
<link rel="stylesheet" href="style.css">
<!--Game-->
<canvas id="myCanvas" width="600" height="400" style="border:2px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>

<button style="position:absolute;left:550px;top:600px;" class="buttonDrive" onmousedown="mouseDown()" onmouseup="mouseUp()">Drive</button>

<button class="buttonPark" onclick="parkDetector()" style="position: absolute;left: 550px; top: 540px;"><strong>Park</strong></button>
<div id="Car-Body">
  <script>
    var canvas = document.getElementById('myCanvas'),
      ctx = canvas.getContext('2d'),
      x = 0,
      last = performance.now(),
      animate;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.rect(x, 20, 20, 20);
      ctx.fillStyle = "#000000";
      ctx.fill();
      x += 0.5;
      animate = requestAnimationFrame(draw);
    }
  </script>
</div>
<script>
  var continueAnimating = true;
  var carBody = document.getElementById("Car-Body");
  // detect if car is parked
  function parkDetector() {
    if (carBody > 0) {
      // If the car Parked in the correct spot
      carIsParked();
    }
  }
  // If the car is not parked in the correct spot
  if (carBody < 176) {
    function carIsNotParked() {
      alert("Hmm... it doesn't seem like you parked!");
    }
  }

  function carIsParked() {
    alert("You Parked!");
    document.body.innerHTML += p;
    document.body.innerHTML += '<button onclick="nextLevel()">Next Level</button>';
  }
  // Direct the car
  var p = '<div></div>';
  // Redirect to Next Level
  function nextLevel() {
    document.getElementsByClassName().innerHTML = '<a href="https://sites.google.com/view/parking-master-lvl2">Next Level</a>';
  }

  function mouseUp() {
    console.log('wow');
    cancelAnimationFrame(animate) // if the "Drive" button is let go of, cancel the animation
  }

  function mouseDown() {
    draw();
    // if "Drive" is pressed, draw the animation
  }
</script>

Update 7-16-21: Thanks again! now I have an amazing fully-developed webgame you can play [here.](https://parkingmaster.w3spaces.com/) — , Jul 16 '21 at 23:03

How to stop a requestAnimationFrame on canvas in JavaScript

2 Answers2