var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
var canvas2 = document.getElementsByTagName("canvas")[1];
var context2 = canvas2.getContext("2d");
var offset;
var flag = true;
var offset2;
var flag2 = true;
function animate() {
var myAnimation = requestAnimationFrame(animate);
offset += (flag === true) ? 10 : -10;
if (offset >= 0) {
offset = 0;
}
if (offset <= -600) {
offset = -600
cancelAnimationFrame(myAnimation);
}
canvas.height = 156;
context.strokeStyle = "#000";
context.moveTo(66, 156);
context.lineTo(132, 104);
context.lineTo(132, 52);
context.lineTo(66, 0);
context.lineTo(0, 52);
context.lineTo(0, 104);
context.closePath();
context.setLineDash([600, 600]);
context.lineDashOffset = -offset;
context.stroke();
}
function animate2() {
var myAnimation2 = requestAnimationFrame(animate2);
offset2 += (flag2 === true) ? 10 : -10;
if (offset2 >= 0) {
offset2 = 0;
}
if (offset2 <= -600) {
offset2 = -600
cancelAnimationFrame(myAnimation2);
}
canvas2.height = 156;
context2.strokeStyle = "#000";
context2.moveTo(66, 156);
context2.lineTo(132, 104);
context2.lineTo(132, 52);
context2.lineTo(66, 0);
context2.lineTo(0, 52);
context2.lineTo(0, 104);
context2.closePath();
context2.setLineDash([600, 600]);
context2.lineDashOffset = -offset2;
context2.stroke();
}
canvas.addEventListener('mouseenter', function() {
offset = -600;
flag = true
animate();
})
canvas.addEventListener('mouseleave', function() {
flag = false;
})
canvas2.addEventListener('mouseenter', function() {
offset2 = -600;
flag2 = true
animate2();
})
canvas2.addEventListener('mouseleave', function() {
flag2 = false;
})