JSFiddle - React, Tailwind, and code Playground
HTML
<canvas style="width:400px;height:300px; border:1px solid #ccf;"></canvas>
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();