JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<p>Mouse enter the canvas to animate the curve up</p>
<p>Mouse leave the canvas to animate back to a line</p>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
            background-color: ivory;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

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

var cpY = 150;
var movement = -8;
var fps = 60;

$("#canvas").mouseenter(function () {
    cpY = 150;
    movement = -10;
    draw();
});
$("#canvas").mouseleave(function () {
    cpY = 50;
    movement = 15;
    draw();
});

drawLine();

function drawLine() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(100, 150);
    ctx.lineTo(200, 150);
    ctx.lineWidth = 10;
    ctx.stroke();
}

function draw() {
    setTimeout(function () {

        if (cpY < 50) {
            return;
        }
        if (cpY > 150) {
            drawLine();
            return;
        }

        // request another loop
        requestAnimationFrame(draw);

        // animate the control point
        cpY += movement;

        // draw the new bezier
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(100, 150);
        ctx.quadraticCurveTo(150, cpY, 200, 150);
        ctx.lineWidth = 10;
        ctx.stroke();

    }, 1000 / fps);
}