JSFiddle - React, Tailwind, and code Playground

by mxxxl

HTML

<canvas id="paper" width="249" height="20"></canvas>

JavaScript

var canvas = $("#paper")[0];
var c = canvas.getContext("2d");

var startX = 0;
var startY = 10;
var endX = 249;
var endY = 10;
var arrowdelta = 1;
var amount = 0;
setInterval(function() {
    amount += 0.01; // change to alter duration
    if (amount > 1) amount = 1;
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.strokeStyle = "black";
    c.moveTo(startX, startY);
    // lerp : a  + (b - a) * f
    c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);

  
    c.stroke();
}, 30);

setInterval(function() {
    amount += 0.01; // change to alter duration
 
    
    c.fillRect(5,5,5,5);
    c.translate(1,1);
  
    c.stroke();
}, 30);