JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="width:400px;height:300px;" width="400" height="300"></canvas>

CSS

* {padding:0px;margin:0px;}

JavaScript

var canvas = $('canvas')[0];
var ctx = canvas.getContext("2d");
$(document).mousemove(function (event) {
    drawBackground();
    swipe(event.clientX);
});

function swipe(mouseX) {
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.moveTo(mouseX, 0);
    ctx.lineTo(mouseX, 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();