JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="width:400px;height:300px; border:1px solid #ccf;" width="400" height="300"></canvas>

JavaScript

var canvas = document.getElement('canvas');
var ctx = canvas.getContext("2d");
console.log(ctx);
window.addEvent('mousemove', function (event) {
    drawBackground();
    draw(event.event.clientX);
});

function draw(mouseX) {
    
    // fixes offset caused by event.clientX and the canvas element
    // having different origins for their coordinate systems:
    var xCoord = mouseX - canvas.getBoundingClientRect().left;
    
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.moveTo(xCoord, 0);
    ctx.lineTo(xCoord, canvas.height);
    ctx.stroke();
    ctx.closePath();
}

function drawBackground() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 1;
    ctx.moveTo(0, 0);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.stroke();
    ctx.closePath();
}
drawBackground();