JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

*{
    margin:0px;
    padding:0px;
}
html, body {
    overflow:hidden;
    height:100%;
}
canvas {
    
    width:100%;
    height:100%;
    outline:solid black 1px;
}

JavaScript

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.c = document.createElement('canvas');
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);
var c = canvas.getContext('2d');
c.lineWidth = 1;
c.beginPath();
c.moveTo(10,10);
c.lineTo(100, 10);
c.lineTo(100, 100);
c.lineTo(10, 100);
c.lineTo(10, 10);
c.stroke();
var high = Math.round(Math.max(canvas.width,canvas.height)/2),count = high;
while(count>0){
count-=10;
    var b = count*3;
    c.drawImage(canvas, high-b,high-b,canvas.width -((high-b)*2),canvas.height-((high-b)*2));
}
window.addEventListener('resize', function () {
    canvas.c.width = canvas.width;
    canvas.c.height = canvas.height;
    canvas.c.getContext('2d').drawImage(canvas, 0, 0);
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);
    c.drawImage(canvas.c, 0, 0, canvas.width, canvas.height);
});