Stop canvas animation on button click

Question

I have this canvas animation and I am trying to stop it on button click. Therefore, I need to call the function cancelRAF() with the id of requestAnimationFrame(drawCircle) .

 var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext('2d'); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; var cancelRAF = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame|| window.mozCancelAnimationFrame|| window.msCancelAnimationFrame; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; function drawCircle() { mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "grey"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "red"; mainContext.fill(); angle += Math.PI / 64; var id = requestAnimationFrame(drawCircle); return id; } var id = drawCircle(); function stop_animation() { cancelRAF(id); }

 <!DOCTYPE html> <html lang="en-US"> <head> <title>HTML5 Canvas Example</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,JavaScript"> <meta name="author" content="WebCodeGeeks.com"> <style> canvas { border: 3px #CCC solid; } </style> </head> <body> <div id="container"> <canvas id="myCanvas" height="450" width="450"></canvas> </div> <input type="button" value="STOP" onclick="stop_animation()"> <!-- SCRIPT IS LOCATED HERE --> </body> </html>

I tried to do it like this, but it does not work.

Answer 1

Since requestAnimationFrame must be constantly called to continue the animation loop, an easy way to stop an animation loop is to exit from the animation loop function without requesting another frame. This way you don't have to use cancelAnimationFrame at all.

Create a flag indicating if the animation should continue

// create a flag controlling if the animation will continue or stop
var continueAnimating=true;

If the flag says STOP, return without executing the loop code

function drawCircle(){

  // if the continue animation flag says STOP then just return
  if(!continueAnimating){return;}

  // do animation stuff

  // request another frame 
  requestAnimationFrame(drawCircle);

}

When the stop button is clicked, just set the flag to stop animating

// set the animation flag to STOP if the stop button is clicked
document.getElementById('stopAnimating').addEventListener('click',function(){
    continueAnimating=false;
});

Example code and a Demo:

 var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext('2d'); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; // a flag to indicate if the animation should continue var continueAnimating=true; function drawCircle(){ // if the continue animation flag says STOP then just return if(!continueAnimating){return;} mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "grey"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "red"; mainContext.fill(); angle += Math.PI / 64; requestAnimationFrame(drawCircle); } drawCircle(); // set the animation flag to STOP if the stop button is clicked document.getElementById('stopAnimating').addEventListener('click',function(){ continueAnimating=false; });

 <div id="container"> <input type="button" value="STOP" id=stopAnimating> <br> <canvas id="myCanvas" height="450" width="450"></canvas> </div>

Answer 2

I solved it, the problem was because of wrong variable scopes..

 var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext('2d'); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; var cancelRAF = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame|| window.mozCancelAnimationFrame|| window.msCancelAnimationFrame; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var id = ""; function drawCircle() { mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "grey"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "red"; mainContext.fill(); angle += Math.PI / 64; id = requestAnimationFrame(drawCircle); } drawCircle(); function stop_animation() { cancelRAF(id); }

 <!DOCTYPE html> <html lang="en-US"> <head> <title>HTML5 Canvas Example</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,JavaScript"> <meta name="author" content="WebCodeGeeks.com"> <style> canvas { border: 3px #CCC solid; } </style> </head> <body> <div id="container"> <canvas id="myCanvas" height="450" width="450"></canvas> <input type="button" value="STOP" onclick="stop_animation()"> </div> </body> </html>

Stop canvas animation on button click

Question

2 answers

solution1
2 ACCPTED 2016-03-30 19:46:34

solution2
0 2016-03-29 13:49:27

Stop canvas animation on button click

Question

2 answers

solution1 2 ACCPTED 2016-03-30 19:46:34

solution2 0 2016-03-29 13:49:27

solution1
2 ACCPTED 2016-03-30 19:46:34

solution2
0 2016-03-29 13:49:27