JSFiddle - React, Tailwind, and code Playground

by 8950s

HTML

<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>
<div style='background-color:white;padding:10px;width: fit-content'>
Click somewhere
</div>

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;
    
		console.log = function(stuff) {
			document.querySelector('div').innerHTML = stuff
		}
		
    // Look what color the pixel at the screenshot is
    console.log(JSON.stringify(screenshotCtx.getImageData(x, y, 1, 1).data));
		document.querySelector('div').style.backgroundColor = `rgba(${screenshotCtx.getImageData(x, y, 1, 1).data[0]}, ${screenshotCtx.getImageData(x, y, 1, 1).data[1]}, ${screenshotCtx.getImageData(x, y, 1, 1).data[2]}, ${screenshotCtx.getImageData(x, y, 1, 1).data[3]})`
}
    

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