JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 200vh;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

JavaScript

// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
    screenshotCtx,
    timeBetweenRuns = 10,
    lastTime = Date.now();
function getScreenshot() {
    // Limit how soon this can be ran again
    var currTime = Date.now();
    if(currTime - lastTime > timeBetweenRuns) {
        html2canvas(document.body).then(function(canvas) {
            screenshotCanvas = canvas;
            screenshotCtx = screenshotCanvas.getContext('2d');
        });
        lastTime = currTime;
    }
}
setTimeout(function() { // Assure the initial capture is done
    getScreenshot();
}, 100);

// Get the user's click location
document.onclick = function(event) {
    var x = event.pageX,
        y = event.pageY;
    
    // Look what color the pixel at the screenshot is
    console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}
    

// Update the screenshot when the window changes size
window.onresize = getScreenshot;