JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c" width="600" height="600"></canvas>
JavaScript
var canvas = new fabric.Canvas('c', {
selection: true,
/*theo 12-02-2015*/
//renderOnAddRemove:false,
backgroundColor: 'yellow'
});
var RADIUS_CHILDREN_CIRCLE = 8;
var circles = [];
function addCirlceTable(left_padding_circle, top_padding_circle, count_chairs, radiusCircle) {
radiusCircle = (typeof radiusCircle === "undefined") ? 35 : radiusCircle;
var left_p = radiusCircle - RADIUS_CHILDREN_CIRCLE;
var top_p = radiusCircle - RADIUS_CHILDREN_CIRCLE;
var left_group_circle = left_padding_circle - left_p;
var top_group_circle = top_padding_circle - top_p;
var rad_parent_circle = radiusCircle;
var radius_children_circle = RADIUS_CHILDREN_CIRCLE;
var rad_parent_child_circle = radiusCircle + 13;
var length_line_parent_cirle = (2 * Math.PI * rad_parent_child_circle) * 2 + radius_children_circle * 3;
var parent_circle_table = new fabric.Circle({
left: left_group_circle,
top: top_group_circle,
radius: rad_parent_circle,
fill: '#FFE2EB',
stroke: '#7F7F7F',
hasControls: true,
hasBorders: true,
hasRotatingPoint: true,
selectable: true,
objectType: 'parent'
});
circles.push(parent_circle_table);
var height_circle = parent_circle_table.getHeight();
var colors = ['#FFE2EB'];
var centerX = left_padding_circle;
var centerY = top_padding_circle;
var innerRadius = rad_parent_child_circle;
var count_child_circle = count_chairs;
var all_circle_lenght = count_child_circle * (radius_children_circle * 2);
var length_interval = length_line_parent_cirle / count_child_circle;
var interval = length_interval / 100;
var p = 0;
//canvas.add(parent_circle_table);
for (var i = 0; i < count_child_circle; i++) {
var x = centerX + innerRadius * Math.cos(p);
var y = centerY + innerRadius * Math.sin(p);
var circle = new...