JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1"></canvas>

JavaScript

// this code was autogenerated from PJS
var sketchProc = (function($p) {

    var rectSizeW = 100;
    var rectSizeH = 200;
    var topCornerX = 300;
    var topCornerY = 300;
    var rot = 0;

    function setup() {
        $p.size(500, 500);
        $p.ellipseMode($p.CENTER);
        $p.rectMode($p.CORNER);
    }
    $p.setup = setup;

    function draw() {
        $p.background(120);

        $p.pushMatrix();
        $p.translate(topCornerX, topCornerY);
        $p.rotate(rot);

        $p.stroke(0);
        $p.strokeWeight(1);
        $p.fill(255);
        $p.rectMode($p.CENTER);
        $p.rect(0, 0, rectSizeW, rectSizeH);

        $p.noFill();
        $p.stroke(0, 120);
        $p.strokeWeight(2);
        $p.rect(0, 0, rectSizeW, rectSizeW);

        $p.fill(0, 255, 0);
        $p.ellipse(rectSizeW / 2, rectSizeH / 2, 10, 10);

        $p.ellipseMode($p.CENTER);
        $p.fill(255, 0, 0);
        $p.ellipse(rectSizeW / 2, rectSizeW / 2, 10, 10);

        $p.popMatrix();

        $p.noStroke();
        $p.fill(0, 0, 255);
        $p.ellipse($p.mouseX, $p.mouseY, 10, 10);
    }
    $p.draw = draw;

    function mouseDragged() {
        rot = $p.PI * 3 / 4 + $p.atan2((topCornerY - $p.mouseY), (topCornerX - $p.mouseX));
    }
    $p.mouseDragged = mouseDragged;

})

var canvas = document.getElementById("canvas1");
var processingInstance = new Processing(canvas, sketchProc);