Mit dem nr kann ich nicht arbeiten, Hier erhalte ich immer den letzten Index.
Dies ist ein häufiges Problem, wenn man Eventlistener in einer Schleife zuweist und diese auf einen Schleifenindex zugreifen: Wenn das Event feuert, ist die Schleife längst durchgelaufen und der Index, hier die Variable nr, hat den Endwert, hier 10.
Lösen kann man dies durch die Verwendung einer Funktion, wie du schon geschrieben hast oder einfacher, indem man "let" statt "var" bei der Initalisierung verwendet. Dann findet der Listener den Wert vor, den die Variable hatte, als der Listener registriert wurde.
Und um jederzeit auf die Elemente zugreifen zu können, empfehle ich, ihnen Namen zu geben.
Code
<canvas width="400" height="300"></canvas>
<script>
var wrect = 50, hrect = 50, dist = 5,
xstart = 50, ystart = 50,
cv = $("canvas");
for (let x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
var num = nr;
cv.drawRect({
name: 'rect' + nr,
layer: true,
fillStyle: 'lightblue',
x: x, y: y, width: wrect, height: hrect,
fromCenter: false,
click: function (layer) {
var txt = cv.getLayer('text' + nr).text;
alert(txt);
$(this).animateLayer(layer, {
fillStyle: 'blue'
});
}
}).drawText({
name: 'text' + nr,
layer: true,
fillStyle: 'black',
x: x + wrect / 2,
y: y + hrect / 2,
text: nr
});
if ((nr + 1) % 5 == 0) {
y += dist + hrect;
x = xstart;
} else {
x += dist + wrect;
}
}
</script>