lineDashOffset

MouseOver on canvas above

Code
<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=0,animation;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  
  ctx.setLineDash([5,6]);
  ctx.lineWidth=3;
  ctx.strokeRect(60,60,80,80);
  ctx.lineDashOffset=y++;
  y%=10;

  animation = requestAnimationFrame(draw);
}

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

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