将鼠标悬停在动画中的HTML-5画布图像上以播放/暂停

Question

I have a HTML-5 canvas in which there is a circle which is animated. Refer to the following JS code.

function doFirst(){
   canvas = document.getElementById('myCanvas');
   context = canvas.getContext('2d');
   centerX = canvas.width / 4;
   centerY = canvas.height / 4;
   radius = 20;    
   dy=4;
   drawCircle(centerX,centerY,radius);
   myVar=setInterval(moveCirc,40);      
}

function moveCirc(){                
context.clearRect(0,0,canvas.width,canvas.height);
drawCircle(centerX,centerY,radius);
centerY+=dy;
if(centerY>canvas.height-50)
  clearInterval(myVar);     
}

function drawCircle(x,y,r){     
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.fillStyle = 'blue';
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.stroke();
context.fill();
}
window.addEventListener("load",doFirst,false);

I want that whenever the user brings his mouse over the circle, the animation should pause and a message should be displayed. When the user moves his mouse out of the circle, then the animation should start again from the point where it paused, and also, the message should disappear. Please help me in achieving this functionality.

Answer 1

If you are using css3 animation then on mouse over change the css property

-webkit-animation-play-state: to paused to pause your animation ;

and to start the animation again from that point change the css property

-webkit-animation-play-state: to running

source : http://css-infos.net/property/-webkit-animation-play-state

NB " -webkit " for webkit based browser; use " -moz " for Mozilla , " -o " for opera etc.