Display no overalapping texts inside nested circles on fabricjs

Question

I am trying to display text (number in my case) inside of 5 nested circles on fabricjs canvas But because the circles are nested inside each other and the text positions are the same as the circles positions texts are overlapping each other therefore i try to shift the text to the left to a certain amount of pixels but the results are not what i want. Here is the snippets.

(function()
{
    const canvas = new fabric.Canvas('fabricCanvas', {selection: false});
    fabric.Object.prototype.transparentCorners = false;

    document.addEventListener('DOMContentLoaded', function(){

      drawRectangle();
      drawCircles()
      
    });

    function drawRectangle()
    {
        const rect = new fabric.Rect({
          left: 200,
          top: 100,
          width: 200,
          height: 200,
          fill: 'green',
          angle: 0,
          padding: 0,
          class: 'rectangle',
          opacity: 0.6,
          originX:'left',
          originY:'top'
        });
        canvas.add(rect);
    }
    
    

    function drawCircles()
    {
         let my_radius = 65;

         for(let i = 0; i < 5; i++)
         {
                  
                let circle =  new fabric.Circle({
                    left: 300,
                    top: 200,
                    radius: my_radius,
                    strokeWidth: 1,
                    stroke: '#000',
                    fill: '#cca',
                    originX:'center',
                    originY:'center'
                });
                  let text_shift = circle.left + 0; //change 60 to 0 to ses the results
                  const text = new fabric.Text((i + 1).toString(), {
                    left: (i !== 4) ? text_shift : circle.left,
                    top: circle.top,
                    fontFamily: 'Arial',
                    fontWeight: 'bold',
                    fontSize: 10,
                    fill: 'white',
                    originX: 'center',
                    originY: 'center'
                    
                });

                  const group = new fabric.Group([circle, text], {
                    left: circle.left,
                    top: circle.top,
                    originX: 'center',
                    originY: 'center',
                    selectable: false,
                  
                });

                canvas.add(group);

                my_radius -= 10;
         }
    }

    
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="fabricCanvas" width="500" height="400" style="border: 2px solid green;"></canvas>

I would appreciate any help

Answer 1

To get the right cornor position you can add circle radius to center position.

left: circle.left + circle.radius - 5,

DEMO

(function() {
  const canvas = new fabric.Canvas('fabricCanvas', {
    selection: false
  });
  fabric.Object.prototype.transparentCorners = false;
  drawRectangle();
  drawCircles()

  function drawRectangle() {
    const rect = new fabric.Rect({
      left: 200,
      top: 100,
      width: 200,
      height: 200,
      fill: 'green',
      angle: 0,
      padding: 0,
      class: 'rectangle',
      opacity: 0.6,
      originX: 'left',
      originY: 'top'
    });
    canvas.add(rect);
  }

  function drawCircles() {
    let my_radius = 65;
    for (let i = 0; i < 5; i++) {
      let circle = new fabric.Circle({
        left: 300,
        top: 200,
        radius: my_radius,
        strokeWidth: 1,
        stroke: '#000',
        fill: '#cca',
        originX: 'center',
        originY: 'center'
      });
      let text_shift = circle.left + 60; //change 60 to 0 to ses the results
      const text = new fabric.Text((i + 1).toString(), {
        left: circle.left + circle.radius - 5,//5px padding,else use text width
        top: circle.top,
        fontFamily: 'Arial',
        fontWeight: 'bold',
        fontSize: 10,
        fill: 'white',
        originX: 'center',
        originY: 'center'

      });

      const group = new fabric.Group([circle, text], {
        left: circle.left,
        top: circle.top,
        originX: 'center',
        originY: 'center',
        selectable: false,
      });
      canvas.add(group);
      my_radius -= 10;
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="fabricCanvas" width="500" height="400" style="border: 2px solid green;"></canvas>