JSFiddle - React, Tailwind, and code Playground

by Strernd

HTML

<canvas id="canvas" width="800" height="800"></canvas>
    <canvas id="template" width="800" height="800"></canvas>

JavaScript

const templateCanvas = document.getElementById( "template" );
const tctx = templateCanvas.getContext( "2d" );
tctx.fillStyle = "red";
tctx.fillRect( 300, 300, 200, 200 )


const canvas = document.getElementById( "canvas" );
const ctx = canvas.getContext( "2d" );
const max = {
    x: 800,
    y: 800
};

const sites = [];
const points = 10000;
for ( let i = 0; i < points; i++ ) sites.push( {
    x: Math.floor( Math.random() * max.x ),
    y: Math.floor( Math.random() * max.y )
} );


const c = ( alpha ) => 'rgba(255,0,0,' + alpha + ')';
const c2 = ( alpha ) => {
    let colors = [
        'rgba(78,9,12,' + alpha + ')',
        'rgba(161,34,19,' + alpha + ')',
        'rgba(171,95,44,' + alpha + ')',
        'rgba(171,95,44,' + alpha + ')',
        'rgba(252,160,67,' + alpha + ')'
    ]
    return colors[ Math.round( Math.random() * colors.length ) ];
}

sites.forEach( p => {
    let imgData = tctx.getImageData( p.x, p.y, 1, 1 ).data;
    ctx.fillStyle = ( imgData[ 0 ] == 255 ) ? c2( 1 ) : c2( 0 );
    ctx.fillRect( p.x, p.y, 2, 2 )
} );