animation frame

by bhupendra negi

HTML

<input type ="button" value = "Start" id="start"/>
<input type ="button" value = "Stop"  id="stop" />

CSS

canvas {
    border:1px solid blue
}

div {
    width:10px;
    height:10px;
    background: orange;
    float:left
    
 
}

input[type="button"]
{
   display:block;
    float:left
}
}

JavaScript

var str = document.getElementById("start");
var end = document.getElementById("stop");
str.addEventListener("click",start,false);
end.addEventListener("click",stop,false);

var globalId ;
var stop = false;

function animate()
{ 
    console.log("animate");
    if(!stop)
{
   var div = document.createElement("div");
   document.body.appendChild(div); 
    globalID = requestAnimationFrame(animate);}
}

function start()
{ stop = false;
  globalId = requestAnimationFrame(animate);
}

function stop()
{
  console.log(globalId);  
  stop = true; 
  console.log("stop fun");  
  //window.cancelAnimationFrame(globalId);  
}