JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    window.SlugsView = function(o) {
    var w = window.innerWidth
    var h = window.innerHeight
    var canvas1 = document.createElement("canvas")
    canvas1.width = w
    canvas1.height = h
    canvas1.style.position = "absolute"
    canvas1.style.left = 0
    canvas1.style.top = 0
    

    var canvas2 = document.createElement("canvas")
    
    canvas2.width = w
    canvas2.height = h
    canvas2.style.position = "absolute"
    canvas2.style.left = 0
    canvas2.style.top = 0
    canvas2.style.display = "none"


    var ctx1 = canvas1.getContext("2d")
    var ctx2 = canvas2.getContext("2d")


    var current = ctx1

    this.clear = function(opacity) {
   
    
        if(current == ctx1) {
            ctx2.globalAlpha = opacity
            ctx2.clearRect(0,0,w,h)
            ctx2.drawImage( canvas1, 0, 0)

            canvas1.style.display = "none"
            canvas2.style.display = "block"
            current = ctx2
        }
        else {
            ctx1.globalAlpha = opacity
            ctx1.clearRect(0,0,w,h)
            ctx1.drawImage( canvas2, 0, 0)

            canvas1.style.display = "none"
            canvas2.style.display = "block"
            current = ctx1
        }

        
    }

    this.drawSlug = function(x, y) {
        

        current.globalAlpha = 1
        current.fillStyle = "white"
        current.beginPath()
        current.arc(x,y,10,0,Math.PI*2)
        current.fill()
        current.closePath()
    }

    this.el = document.createElement("div")

    this.el.appendChild(canvas1)
    this.el.appendChild(canvas2)



}

document.body.style.margin = "0px";


var sv = new SlugsView({background: "red"})

document.body.appendChild(sv.el)
document.body.style.background = "red"


var frame = 0;

function Square(x) {

    x += 0.125

    if(x<0) 
        x = x - (x|0) + 1

    var x4 = (x%1)*4;

    return x4 < 1
        ? [x4,0]
        : x4 < 2 
        ? [1,x4-1]
        : x4 < 3
        ? [3-x4,1]
        :...