JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<canvas id="cubecv" width=400 height=400 style='border:1px solid black'></canvas>

JavaScript

function line(ctx,x1,y1,x2,y2){
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
}
function bar(ctx,fcolor,scolor, lwidth, x,y, w,h){
	ctx.fillStyle = fcolor;
    ctx.lineWidth = lwidth;
    ctx.strokeStyle = scolor;
    ctx.fillRect(x,y,w,h);
    ctx.strokeRect(x,y,w,h);
}

var cube3d = function(){  
this.canvas="";
    this.animation={};
    this.ctx="";
    this.size = 2;
    this.sides={"red":"rrrrrrrrr","orange":"ooooooooo","blue":"bbbbbbbbb",
           "green":"ggggggggg","white":"wwwwwwwww","yellow":"yyyyyyyyy"};
    this.colors={"o":"orange", "r":"red","w":"white","b":"blue","g":"green","y":"yellow"};
    var Pi180 = Math.PI/180;
	this.FRONT=0;
    this.TOP=1;
    this.RIGHT=2;
    this.LEFT=3;
    this.UP=4;
    this.DOWN=5;
    this.BACK=6;
    this.Width = 0;
    this.Height = 0;

	this.tsin = Array(360); 
	this.tcos = Array(360);
    this.R_N = 0;
    this.R_X = 1;
    this.R_Y = 2;
    this.R_Z = 3;    
    this.init = function(cv,sz){
        if(typeof cv !== "undefined"){
    	if(typeof(cv)==='string') cv = $(cv)[0];
    	this.ctx = cv.getContext("2d");
		this.canvas = cv;
        this.Width = cv.width;
        this.Height = cv.height;
            if(typeof sz === 'undefined') sz = 3;
            if(sz < 2) sz = 2;
            this.size = sz;
        /*$(cv).on( "mousedown", this.mousedown);
        $(cv).on( "mouseup", this.mouseup);
        $(cv).on( "touchstart", this.touchstart);
        $(cv).on( "touchend", this.touchend);*/
        }
        
        	this.sides["red"]="rrrrrrrrr";
            this.sides["orange"]="ooooooooo";
            this.sides["blue"]="bbbbbbbbb";
            this.sides["green"]="ggggggggg";
            this.sides["white"]="wwwwwwwww";
            this.sides["yellow"]="yyyyyyyyy";
        
        for(var i=0;i<360;i++) {
            this.tsin[i] = Math.sin(i*Pi180);
			this.tcos[i] = Math.cos(i*Pi180);
        }
        
        var s= this.size; 
		var ss = s*s;   
       ...