JSFiddle - React, Tailwind, and code Playground

HTML

<canvas height="400" width="400"></canvas>
<button class="nextx">nextx</button>
<button class="nexty">nexty</button>

CSS

canvas{background-color:#eeeeee;}

JavaScript

function grid(ctx, dw, dh, w,h){
    ctx.strokeStyle='black';
    ctx.lineWidth = 0.1;
    for(let j = 0; j<w; j+=dw){
        ctx.beginPath();
        ctx.moveTo(j,0);
        ctx.lineTo(j,h);
        ctx.closePath();
        ctx.stroke();
    }
    for(let i = 0; i<h; i+=dh){
        ctx.beginPath();
        ctx.moveTo(0,i);
        ctx.lineTo(w,i);
        ctx.closePath();
        ctx.stroke();
    }
}
function point(ctx, scale, anchor, color){
    ctx.strokeStyle=color||'red';
    ctx.lineWidth = 1;
    let X = [anchor[0]*scale[0], anchor[1]*scale[1]];
    const a = 3;
    ctx.beginPath();
    ctx.moveTo(X[0]-a, X[1]-a)
    ctx.lineTo(X[0]+a, X[1]+a)
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(X[0]+a, X[1]-a)
    ctx.lineTo(X[0]-a, X[1]+a)
    ctx.closePath();
    ctx.stroke();
}
function square(ctx, scale, dw, dh, anchor){
    let X = [anchor[0]*scale[0], anchor[1]*scale[1]];
    ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
    ctx.fillRect(X[0], X[1], dw, dh)
    ctx.fill();
}
function line(ctx, scale, A, B){
    ctx.strokeStyle='#555555';
    let X = [A[0]*scale[0], A[1]*scale[1]];
    let Y = [B[0]*scale[0], B[1]*scale[1]];
    ctx.beginPath();
    ctx.setLineDash([5, 15]);
    ctx.moveTo(X[0], X[1])
    ctx.lineTo(Y[0], Y[1])
    ctx.closePath();
    ctx.stroke();
    ctx.setLineDash([]);
}
function main(){
    function vec(a,b){return [b[0]-a[0], b[1]-a[1]]}
    function add(a,b){return [b[0]+a[0], b[1]+a[1]]}
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    const A = [2.5, 6.5]
    const B = [8.1, 3.5]
    /*const A = [4.5, 2.5]
    const B = [8.1, 8.5]*/

    const vAB = vec(A,B);
    const nx = vAB[0]
    const vAB_x = [vAB[0]/nx, vAB[1]/nx];

    const ny = Math.abs(vAB[1])
    const vAB_y = [vAB[0]/ny, vAB[1]/ny];

    let x = vAB[0]<0? Math.floor(A[0]):Math.ceil(A[0]);
    let I = [x, A[1] + (Math.abs(x-A[0]))*vAB_x[1] ]

    let y = vAB[1]<0?...