JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<button id=launch>Launch Window</button>
<canvas id=mainCanvas style="width:500px;height:500px;background-color:blue;"></canvas>

JavaScript

var ctx = document.getElementById('mainCanvas').getContext('2d');

document.getElementById('launch').addEventListener('click', function (e) {
    var worker = window.open();
    worker.document.body.style.backgroundColor = 'red';

    var wBtn = worker.document.createElement('button');
    wBtn.textContent = 'Add Canvas';
    wBtn.addEventListener('click', function (e) {
        var wCanvas = worker.document.createElement('canvas');
        wCanvas.style.width = "500px";
        wCanvas.style.height = "500px";
        wCanvas.style.backgroundColor = 'white';
        worker.document.body.appendChild(wCanvas);

        wContext = wCanvas.getContext('2d');

        for (i = 0; i < 100; i++) {
            for (j = 0; j < 100; j++) {
                wContext.beginPath();

                wContext.rect(i * 5, j * 5, 5, 5);
                wContext.fillStyle = 'green';
                wContext.fill();
            }
        }

        var imageData = wContext.getImageData(0, 0, 500, 500);
        ctx.putImageData(imageData, 0, 0);
    });
    worker.document.body.appendChild(wBtn);
    
    //window.open ('', 'newwindow', config='height=100,width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no')
});