JSFiddle - React, Tailwind, and code Playground

HTML

<br/><center><canvas id="view" width="400" height="300" style="border: 1px solid black;"/></center>
<br/>
<pre id="data"/>

JavaScript

var x = 90;
var y = 90;
var mx = 0;
var my = 0;
var cvs = document.getElementById('view');
var ctx = cvs.getContext('2d');
var de = document.getElementById('data');
cvs.addEventListener('mousemove', function(e) {
    mx = e.clientX;
    my = e.clientY;
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    plotLine(x, y, mx, my);
}, false);

function plotLine(x0, y0, x1, y1) {
    var dx = Math.abs(x1 - x0);
    var sx = x0 < x1 ? 1 : -1;
    var dy = -Math.abs(y1 - y0);
    var sy = y0 < y1 ? 1 : -1;
    var err = dx + dy;
    var e2;
    var loopcnt = 0;
    for (;;) {

        ctx.fillRect(x0, y0, 1, 1);
        if (x0 === x1 && y0 === y1) break;
        if (loopcnt > 700) {
            de.textContent = "LOOP COUNT IS TOO DAMN HIGH. YOU BROKE SOMETHING.";
            break;
        }
        e2 = err * 2;
        de.textContent = "err: " + err + "\r\ne2: " + e2 + "\r\ndx: " + dx + "\r\ndy: " + dy;
        if (e2 >= dy) {
            err += dy;
            x0 += sx;
        }
        if (e2 <= dx) {
            err += dx;
            y0 += sy;
        }
        de.textContent += "\r\nloopcount: " + loopcnt;
        ++loopcnt;
    }
}