JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<script id="processingcode" type="application/processing">
    
void setup() {
    size(window.innerWidth, window.innerHeight);
    noCursor();
    }  
    
void draw() {
    background(#2c3e50);
    fill(#FFFFFF);
    text("Mouse",mouseX+15,mouseY-5);
    text(mouseX + ", " + mouseY,mouseX+15,mouseY+10);
     text("Window size: " + window.innerWidth + " x "  + window.innerWidth,20,20);
    text("Canvas size: " + width + " x "  +height,20,40);
    fill(#2c3e50);
    stroke(#bdc3c7);
    strokeWeight(3);
    ellipse(mouseX,mouseY,25,25);
    }

    

</script>

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

CSS

body{
    overflow:hidden;
    background-color: #FD8989;
}
canvas{
    position:absolute;
    left:0;
    top:0;
}
.dg.main.a{
       -webkit-user-select: none;  
      -moz-user-select: none;    
      -ms-user-select: none;      
      -o-user-select: none;
      user-select: none;  
}
.close-button{
    cursor:ew-resize !important;
}