Bonjour, je cherche à créer un quadrillage sur un canvas ayant une image de fond.

Les cases font 25x20 et je veux que lorsque je click un texte avec les coordonnees de la case s'affiche au dessus de cette dernière.

A terme les cases ne doivent pas être visible mais pour l'exemple j'en dessinne les contours.

Voici mon code:

var canvas = new fabric.Canvas('carte');
    canvas.selection = false; 
    // taille du canvas 720x376
    var nbLigne = parseInt(376 / 20);
    var nbColonne = parseInt(720 / 25);
    console.log(nbLigne);
    console.log(nbColonne);
    
    for (ligne = 0; ligne < nbLigne-2; ligne++)
    {
        for (colonne = 0; colonne < nbColonne; colonne++)
        {
            var rect = new fabric.Rect({
                left: 8+colonne*25,
                top: 6+ligne*20,
                width: 25,
                height: 20,
                selectable: false,
                fill: 'rgba(0,0,0,0)',
                stroke: 'green',
                strokeWidth: 1
            });
            canvas.add(rect);
            rect.on('mouseup', function () {
                
                var chaine=/*"coucou";*/ligne + "x" + colonne;
                console.log(chaine);
                var texte = new fabric.Text(
                        chaine,
                        {
                            left: rect.left,
                            top: rect.top - 10,
                            fontFamily: 'Comic Sans',
                            fontSize: 10,
                            backgroundColor: 'white',
                            color: 'black'
                        }
                );
        
                canvas.add(texte);
            });
        }
    }

Les zones sont biens définies, mais le texte n'affiche toujours que les coordonnees de la derniere case au dessus de cette derniere, peut importe sur quelle case je clique, je texte des coordonnées de la derniere case s'affiche au dessus de la derniere case.

Où est mon erreur?

Merci d'avance pour vos réponses.