JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

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

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
	html, body { width:100%; height:100%; } /* j full screen*/
	canvas { display:block; } /* remove  scrollbars */
	canvas {    background: #eee;}

JavaScript

var Drawer = {
    animT:1700,//miliseconds
    initT:new Date(),
    updating:false,
    initFig:'bar',
    endFig:'bar',
    inc:0.02,
    cont:0,
    numView:0,
    marginX:20,
    marginY:25,
	t:0.1,
	pos:0,
	draws:[],
    figs:['bar','donut'],//,'pie','semiPie'],
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    data:[{id:'coche',vals:[70]},
       		{id:'moto',vals:[30]},
          {id:'bici',vals:[70]}],
    colores:['#f55','#0A0','#07F','#fB0','#AAf','#f0f','#0ff','#AfA','#AD0','#f0A'],
    
    //////// RENDER //////////////////////
 render: function(requestFrame) {
    var _this=this;
    if(requestFrame)
       window.requestAnimationFrame(function(){_this.render(true);});
     
    if(this.updating){
        this.t=(new Date().getTime()-this.initT.getTime())/this.ttime;
        if(this.t>=1) { this.t=1; this.updating=false;}
        this.redraw();
    }else{
        //this.redraw();
    }

},
    genInitFigs:function(){
        this.fig1=this.getFig(this.initFig);
        this.fig2=this.getFig(this.endFig);
        this.fig=this.fig1; 
        this.adaptFigs();
    },
    
 redraw:function(){
    var ctx=this.ctx;
    ctx.fillStyle = '#EEE';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
	console.log("draws:",this.draws.length);
	for(var i=0;i<this.draws.length;i++){
		this.draws[i].draw(ctx);
	}
	var inter=null;
	inter=this.draws[this.pos].interpolate(this.draws[(this.pos+1)%this.draws.length],this.t);
	inter.draw(ctx);
	this.t+=0.1;
	if(this.t>=1){ this.pos+=1; this.pos=this.pos%this.draws.length; this.t=0;}
	this.t=((this.t*100)%100)/100;
	console.log("t:",this.t);
	//  this.drawExamp(ctx,"green", new Point(120,120),50,80,0,45);
	//  this.drawExamp(ctx,"red", new Point(220,120),50,80,0,45);
  },
    resizeCanvas:function() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.redraw();
} ,
  init:function(){
  	console.log("init")
    var _this=this;
   ...