JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<canvas width="500" height="250"></canvas>

CSS

canvas{
    border: 2px solid #000;
}

JavaScript

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    loop = 'undefined';

var originX = 250,
    originY = 250,
    currentX = originX,
    currentY = originY,
    targetX = 0,
    targetY = 0,
    slope = 0,
    userClicked = false;

canvas.addEventListener("click", function(e){
    targetX = e.offsetX;
    targetY = e.offsetY;
    
    slope = (originY - targetY) / (originX - targetX);
    
    userClicked = true;
});

function drawLine(){
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(currentX, currentY);
    ctx.stroke();
    
    //LERP function
    currentX = originX + (targetX - originX) * duration;
    currentY = originY + (targetY - originY) * duration;
    
    console.log(currentX + ", " + currentY);
}

function gameLoop(){
    if (userClicked) drawLine();
}

loop=setInterval(gameLoop, 1000/30);