Mouseover on above canvas to play animation

library_books<canvas id="canvas" width="220" height="220" style="background-color:#f9f9f9;cursor:pointer;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var angle=0,pangle=0,centerw=canvas.width/2,centerh=canvas.height/2,animation;

var ctx = canvas.getContext("2d");
function pattern(){
  ctx.clearRect(0,0,canvas.width,canvas.height)
  ctx.lineWidth=.5;
  ctx.save();
  ctx.translate(centerw,centerh);
  ctx.rotate(angle*Math.PI/180);
  ctx.translate(-centerw,-centerh);
  while(pangle<360){
    ctx.save();
    ctx.translate(centerw,centerh);
    ctx.rotate(pangle*Math.PI/180);
    ctx.translate(-centerw,-centerh)
    ctx.beginPath();
    ctx.strokeStyle="teal";
    ctx.moveTo(centerw-10,centerh);ctx.lineTo(centerw,20);ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle="red";
    ctx.moveTo(centerw-30,centerh);ctx.lineTo(centerw,20);ctx.stroke();
    ctx.restore();
    pangle%=360;
    pangle+=30;
  }
  ctx.restore();
  angle%=360;
  angle+=3;
  pangle=0;
  animation = requestAnimationFrame(pattern);
}

canvas.addEventListener('mouseover', function() {
  animation = requestAnimationFrame(pattern);
});
canvas.addEventListener('mouseout', function() {
  cancelAnimationFrame(animation);
});
</script>