JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <style>
   .fl {
    background-image: -moz-radial-gradient(center 45deg, circle closest-corner, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 255) 10%);
       background-image: -webkit-gradient(radial, center center, 0, center center, 350, from(rgba(0, 255, 55, 0)), to(rgba(0, 0, 0, 255)));
    width: 5000px;
    height: 5000px;
    position: absolute;
      pointer-events: none;
   }
  </style>
  <script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type='text/javascript'>
$(document).ready(function(){
    
      
      $('#fl').bind('touchmove',function(e){
    e.preventDefault();

    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    console.log(touch.pageX);
});
      
      $(document).mousemove(function(e){
        $("#fl").css({
            top: (e.pageY - 2500) + "px",
            left: (e.pageX - 2500) + "px"
        });
      
      
      
    });
});
</script>

 </head>
 <body onload="draw();" style="
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(http://www.onestopwebmasters.com/wp-content/uploads/2009/12/new-vista-wallpaper.jpg);
  overflow-x: hidden;
  ">
  <div class="fl" id="fl">
  </div>
      befrehjwrlw;ekrjew;lr
      <br>
      ;kldfgjd;sfklj<br><img src="http://placedog.com/150/150"></img><br>
      <button onclick="test();">test</button>
      
      <canvas id="tutorial"></canvas>
 </body>
</html>

JavaScript

function test(){
    alert("test");
}
    function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}