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
});
}
});
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);
}