JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can-i-haz-prediction" width="500" height="500" />

CSS

#can-i-haz-prediction {
    border: 1px solid black;
    width: 500px;
    height: 500px;
}

JavaScript

var canvas = document.getElementById('can-i-haz-prediction'),
    context = canvas.getContext('2d'),
    trail = [],
    requiredTrailLength = 20,
    mousePosition = {
        x: 0,
        y: 0
    };

/** Should return an array of predictions based on the content of trail */
function predict(trail) {
    return trail;
}

function step() {
    window.requestAnimationFrame(step);

    trail.length >= requiredTrailLength && trail.shift();
    trail.push(mousePosition);
    if (trail.length < requiredTrailLength) {
        return;
    }

    drawPredictions();
}

function drawPredictions() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    var predictions = predict(Array.prototype.slice.call(trail));
    context.beginPath();
    context.moveTo(predictions[0].x, predictions[0].y);
    for (var i = 1; i < predictions.length; i++) {
        context.lineTo(predictions[i].x, predictions[i].y);
        context.moveTo(predictions[i].x, predictions[i].y);
    }
    context.stroke();
}

function getMousePosition(event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}

canvas.onmousemove = function (event) {
    mousePosition = getMousePosition(event);
};

step();