dynamic text and links with jCanvas

Question

I have a canvas and I use jCanva (http://calebevans.me/projects/jcanvas/docs.php?p=layers)s to create circles with events.

I want that every circle will have text (for mouseover event) and id (for click event). The problem is that the events are dynamic, and the "i" is always the last i (data.length) so all the circles get the same values... How can I solve it?

 for (i = 0; i < data.length; i++) {
                var id = data[i][0];
                var text = data[i][2];

                $("#mapCanvas").drawArc({
                    layer: true,
                    fillStyle: "yellow",
                    strokeStyle: "#000",
                    strokeWidth: 1,
                    x: Math.random() * c.clientWidth,
                    y: Math.random() * c.clientHeight,
                    radius: 6,
                    click: function (layer) {
                        window.open("Edit/" + id);
                    },
                    mouseover: function (layer) {
                       $("canvas")
                       .addLayer({
                            method: "drawRect",
                            name: "BackgroundLabel",
                            group: "ItemLabel",
                            fillStyle: "#FFFFD4",
                            x: layer.x + 10,
                            y: layer.y - 15,
                            width: 100,
                            height: 20
                       })
                       .drawLayers();

                       $("#mapCanvas").drawText({
                        layer: true,
                        fillStyle: "white",
                        strokeWidth: 0,
                        x: layer.x + 10,
                        y: layer.y - 10,
                        font: "14pt Arial, Verdana, sans-serif",
                        text: text
                        });
                    }
                });

Answer 1

I fixed it - I created a sepereate function "drawOneCircle" that gets the vars and use them. "drawOneCircle" is now contains the content of the original "for" loop.

           for (i = 0; i < data.length; i++) {
                var id = data[i][0];
                var text = data[i][2];
                drawOneCircle(c, id, text);
            }

Answer 2

I know it's not exactly what you asked for but check this library - http://d3js.org/ its awesome for creating data driven documents and will make your work much easier. and I think using svg will give you better performance then using canvas.

Answer 3

@TamarG: to understand why your "i" is always the last i (data.length), I highly recommend a book called "Async JavaScript" by Trevor Burnham. I've programmed in a lot of languages, and I thought I knew JavaScript until I read this book. JavaScript event management is non-intuitive - events are managed unlike in any other language I've used. I didn't get it until I read this book.