JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="paper" width="500" height="300">
  Your browser needs to support canvas for this to work!
</canvas>
<br /> 

<p> Wheel 1 </p>
<a href="javascript::void(0);" id="wheel_1_1">Small</a>
<a href="javascript::void(0);" id="wheel_1_2">Medium</a>
<a href="javascript::void(0);" id="wheel_1_3">Large</a>

<p> Wheel 2 </p>
<a href="javascript::void(0);" id="wheel_2_1">Small</a>
<a href="javascript::void(0);" id="wheel_2_2">Medium</a>
<a href="javascript::void(0);" id="wheel_2_3">Large</a>
<br />

<p id="selected_wheel"> </p>

<br /> 
<button id="white">white</button>
<button id="black">black</button>
<button id="blue">blue</button>

CSS

canvas {
    border:2px solid #333;
}

JavaScript

var commonWheelID = wheelSubID = '';
var canvas = new fabric.Canvas('paper',{
	isDrawingMode: false
});

var circle1 = new fabric.Circle({ radius: 100, fill: 'red', id: 3 });
var circle2 = new fabric.Circle({ radius: 75, fill: 'green', id: 2 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', id: 1 });

var circle4 = new fabric.Circle({ radius: 100, fill: 'red', id: 3 });
var circle5 = new fabric.Circle({ radius: 75, fill: 'green', id: 2 });
var circle6 = new fabric.Circle({ radius: 50, fill: 'blue', id: 1 });

var group1 = new fabric.Group([ circle1, circle2, circle3 ], { left: 100, top: 100, id: 'wheel_1' });
var group2 = new fabric.Group([ circle4, circle5, circle6 ], { left: 300, top: 100, id: 'wheel_2' });
var group3 = new fabric.Group([ group1, group2 ]);
canvas.add(group3).setActiveGroup(group3).renderAll();
group3.center();

$(document).off('click',"a[id^='wheel_']");
$(document).on("click", "a[id^='wheel_']", function(e) {
		e.preventDefault();
  	var selectedWheel = '';
    var linkID = $(this).attr('id');
    var lists = linkID.replace("wheel_", "");
    var wheelArray = lists.split('_');
    var wheelID = wheelArray[0];
    commonWheelID = wheelID;
    wheelSubID = wheelArray[1];
    if(wheelID == 1) {
    		selectedWheel = 'Front';
    } else {
    		selectedWheel = 'Back';
    }
    $("#selected_wheel").html(selectedWheel);
});

$("#white").click(function(){
		changeObjectColor("white");
});
$("#black").click(function(){
		changeObjectColor("black");
});
$("#blue").click(function(){
		changeObjectColor("blue");
});

function changeObjectColor(color) {
    if(!color) return false;

    var activeGroup = canvas.getActiveGroup();
    if (activeGroup) {
        var objectsInGroup = activeGroup.getObjects();
        objectsInGroup.forEach(function(object) {
        		var wheelID = object.id;
            var objLists = object.getObjects();
            for(var i = 0; i < objLists.length; i++) {
            		if(wheelID ==...