JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div><canvas></canvas>
<input type="text" value='test'></input>
<a href='javascript:(function(){alert( location.href)}())'>test link</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>test</div>

CSS

canvas{
    z-index:1;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    margin:0px;
    width:100%;
    height:100%;
    outline:1px red solid;
    pointer-events:none;
}
html,body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
a{
    z-index:-1;
}

JavaScript

var origCall = Function.prototype.call;
var newCall =  function (thisArg) {
    Function.prototype.call = origCall;
    console.log(arguments,this);
    
    origCall.apply(arguments[0],arguments);

    Function.prototype.call = newCall;
};
Function.prototype.call = newCall;
var  canvas = document.getElementsByTagName('canvas')[0],
    size = canvas.getClientRects(),
    _s = document.body.getBoundingClientRect(),
    ctx = canvas.getContext('2d');
console.dir(size);
canvas.style.width = document.body.scrollWidth+'px';
canvas.style.height = document.body.scrollHeight+'px';
canvas.width = document.body.scrollWidth;
canvas.height = document.body.scrollHeight;
 ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
addEventListener('mousemove',function(e){ctx.fillRect(e.pageX,e.pageY,10,10);});