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>