Code

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

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var y=50,
    speed=5,
    animation;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle="red";
  ctx.arc(100, y, 15, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle="black";
  ctx.moveTo(90,200);
  ctx.lineTo(100,196);
  ctx.lineTo(110,200);
  ctx.closePath();
  ctx.stroke();

  y*=.99;
  y+=speed;

  if (y+speed > canvas.height-15 || y+speed <25) speed = -speed;
    animation = requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function() {
  animation = requestAnimationFrame(draw);
});

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