JSFiddle - React, Tailwind, and code Playground

by oscarpalacious

HTML

<canvas id="lienzo" width="400" height="400" style="background-color:#ccc;"></canvas>

JavaScript

$(function() {
	var lienzo = document.getElementById('lienzo'),
	contexto = lienzo.getContext('2d'),
	rotador = new Rotador(),
	contenedor = new Contenedor();

	(function drawFrame() {
		contexto.clearRect(0,0,lienzo.width, lienzo.height);
		window.requestAnimationFrame(drawFrame, lienzo);
		rotador.draw(contexto);
		contenedor.draw(contexto, rotador);
	})();
});

function Rotador() {
	this.x = lienzo.width/2;
	this.y = lienzo.height/2;
	this.w = 250;
	this.h = 20;
	this.angulo = 0;
	this.factor = 0;
}

Rotador.prototype.draw = function(contexto) {
	contexto.save();
	contexto.translate(this.x, this.y);
	if((Math.round( this.factor * 10 ) / 10) == 2.0) this.factor = 0;
	this.factor += 0.003;
	this.angulo = Math.PI * this.factor;
	contexto.rotate(this.angulo);
	contexto.beginPath();
	contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h);
	contexto.stroke();
	contexto.restore();
}

function Contenedor() {
	this.x = lienzo.width/2;
	this.y = lienzo.height/2;
	this.angulo = 0;
	this.w = 0;
	this.h = 0;
}

Contenedor.prototype.draw = function(contexto, rotador) {
	contexto.save();
	contexto.translate(this.x, this.y);
	contexto.beginPath();
	contexto.strokeStyle = '#E24B4B';
	this.angulo = ((rotador.angulo > Math.PI * 0.5 && rotador.angulo < Math.PI * 1) || (rotador.angulo > Math.PI * 1.5 && rotador.angulo < Math.PI * 2))? Math.PI - rotador.angulo : rotador.angulo;
	this.w = Math.sin(this.angulo) * rotador.h + Math.cos(this.angulo) * rotador.w;
	this.h = Math.sin(this.angulo) * rotador.w + Math.cos(this.angulo) * rotador.h;
	contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h);
	contexto.stroke();
	contexto.restore();
}