JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<canvas></canvas>
<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices elit eros, vitae vestibulum massa iaculis sed. Ut egestas nulla velit. Quisque luctus eget augue et pulvinar. Aenean nunc mi, dignissim ut justo quis, tempor laoreet est. Integer consectetur quam non euismod dictum. Phasellus feugiat lobortis magna. Nam cursus pretium nunc vit
    </p>
    <button>Button</button>
    <p style="text-align:center;">
        <u>Notice that you can still highlight text or click any buttons above the canvas.</u>
    </p>
</div>

CSS

html, body {
    overflow: hidden;
}
canvas{
    position: absolute;
    z-index: -1;
}
body > div{
    background: rgba(255, 255, 255, .8);

JavaScript

var canvas = $("canvas");

var ctx = canvas[0].getContext("2d"),
    width = $(document).width(),
    height = $(document).height(),
    a, b;
    
canvas.attr("width", width);
canvas.attr("height", height);

//Drawing part - Notice the function here is only called upon "mousemove"
canvas[0].addEventListener("mousemove", function(e){
    console.log("Drawing.");
    a = a || e.clientX;
    b = b || e.clientY;
    var x = e.clientX,
        y = e.clientY;
    
    ctx.beginPath();
    ctx.moveTo(a, b);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();
    a = x;
    b = y;
})

//MAIN PART
function simulate(e) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("mousemove", true, true, window,
    0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
      canvas[0].dispatchEvent(evt);
    console.log("Emulated.");
}

$("body > div").each(function(){
    this.addEventListener("mousemove", simulate);
});