2

Example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_arc I want to learn how to make this entire circle a clickable link, how do I capture that element? How do events work inside a canvas?

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
odedta
  • 2,430
  • 4
  • 24
  • 51
  • Please consider adding the code to your question instead of linking to it. This way the question will still make sense to others when the link dies. It may also be more likely to garner answers as people will more immediately see some attempted code – Toby May 03 '15 at 13:39
  • This could be an answer you're looking for How do I add a simple onClick event handler to a canvas element?: http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element – Stepashka May 03 '15 at 13:41
  • Toby, there. @Stepashka, i'll check it out, seems a bit complex. Thanks. – odedta May 03 '15 at 13:44
  • That's how things are in your case. – Stepashka May 03 '15 at 13:49

1 Answers1

1

HTML5 canvas is raster-based, so it only contains information about pixel colors. For your reason you should use some vector-based technology like SVG.

If you really want to use canvas and you only need to know if there is anything under the cursor you can just check color of clicked pixel: context.getImageData(x, y, 1, 1).data it will return array of RGBA values. So you can for example check if clicked pixel is not transparent or not in background color. Check how it could work: http://jsfiddle.net/5qt4hezb/1/

Marek
  • 559
  • 2
  • 15
  • You mean SVG tutorial? I do not know any, but you can try RaphaelJS library and read for example this tutorial: http://cancerbero.mbarreneche.com/raphaeltut/ – Marek May 03 '15 at 16:27