JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.min.js"></script>
<canvas id="c" style="border: solid 1px #ccc;"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
canvas.setHeight(600);
canvas.setWidth(300);
canvas.backgroundColor = "#333333";


function toss(left){
var circle = new fabric.Circle({
  left: 0,
  top: 0,
  radius: 25,
  fill: '#FFE600',
  stroke: '#CACA3B',
  strokeWidth: 1,
  angle: 0,
  padding: 0,
  originX: 'center',
  originY: 'center'
});
var innerCircle = new fabric.Circle({
  left: 0,
  top: 0,
  radius: 22,
  fill: '#FFFF00',
  stroke: '#CACA3B',
  strokeWidth: 1.5,
  angle: 0,
  padding: 0,
  originX: 'center',
  originY: 'center'
});
var text = new fabric.Text("+", {
	left: 0,
  top: 0,
	angle:90,
	originX: 'center',
  originY: 'center',
	fill: "#fffdb5",
	stroke: '#CACA3B',
	fontSize: 51,
	fontWeight : 700,
	strokeWidth: 1,
});
var group = new fabric.Group([ circle, innerCircle, text], {
  left: left,
  top: -50,
  originX: 'center',
  originY: 'center',
	selectable: true,
	hasControl: true
});
canvas.add(group);
var rotateIntervall = setInterval(function() {
  var f = 0;
  return function() {
    group.angle = f;
    if (f > 180) {
      f = 0;
    } else {
      f += 1;
    }
    canvas.renderAll();
  };
}(), 0);
group.animate('top', 575, {
      duration: 600,
      onChange: canvas.renderAll.bind(canvas),
      easing: fabric.util.ease['easeOutBounce']
    });
(function rotate(f, count) {
  count += .01;
  var speed = 1;
  var skewInterval = setInterval(function() {
    return function() {
      group.transformMatrix = [0, 1, f, 0, 0, 0];
      if (f > 1 && count >= 10) {
      	clearInterval(skewInterval);
        clearInterval(rotateIntervall);
        return 0;
      }
      else if (f > 1) {
        f = 0;
      } else if (f > 0.8) {
        f += 0.03;
      } else if (f > 0.9) {
      	if(f > 0.93){
        	f += 0.04;
        }else if(f > 0.96){
        	f += 0.05;
        }else{
	        f += 0.06;
        }
      } else {
        f += 0.09;
      }
			
			if(f > .5){
				//group._objects[2].setText('I');
				group._objects[2].set('visibility',...