User add text to shapes

Question

How can I provide to user the ability to add or change a text inside a shape e.g. circle.

Let's say I have the following snippet, how to add text when the user clicks on the circle and writes something:

var canvas = new fabric.Canvas('c1');
var circle = new fabric.Circle({radius: 30, fill: '#f55', top: 100, left: 100});

canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
canvas.add(circle);

I found a question about that but the problem is that I want the user to add text in every shape in the canvas.

Answer 1

You could use the question you found's code and just do a little bit of modifying.

You will first have to figure out where the user clicked on the canvas and see what field text is there. To do that look at this answer and this jsfiddle.

function collides(rects, x, y) {
    var isCollision = false;
    for (var i = 0, len = rects.length; i < len; i++) {
        var left = rects[i].x, right = rects[i].x+rects[i].w;
        var top = rects[i].y, bottom = rects[i].y+rects[i].h;
        if (right >= x
            && left <= x
            && bottom >= y
            && top <= y) {
            isCollision = rects[i];
        }
    }
    return isCollision;
}

Once you know what text field has been clicked on, you can edit that field.