Question

…..

var ctx = canvas.getContext("2d")

ctx.clearRect(pt.x-w/2, pt.y-7, w,14)

ctx.font = "bold 11px Arial"

ctx.textAlign = "center"

ctx.fillStyle = "#888888"

ctx.fillText(label||"", pt.x, pt.y+4)

…..

How can I add more attributes to this text like on click open a url, on hover do something, etc

Answer 1

The parts that make up a canvas are not HTML elements. You cannot attach events to them, and indeed there is no individual memory of any one component; as soon as you commit it to the canvass, it is merged as one picture with everything else.

The workaround is to remember the coordinates yourself of where things are and then, when a click is registered on the canvass, to interpret what it means manually.

This is non-trivial, and there are many libraries that automate this sort of thing. Have a look at KineticJS.