2

I have a round diagram for which I need to display a div when users hover over each section (arcs).

I was going to use canvas: http://www.html5canvastutorials.com/labs/html5-canvas-planets-image-map/ But I have not been able to draw an arc in canvas - or should I use any other technology to create this?

ProgrammerFL23
  • 148
  • 6
  • The example URL you include even _shows_ how to create an arc (although it is using it to draw a full circle). – Phrogz Nov 15 '11 at 20:52

1 Answers1

2

You can draw an arc in HTML5 Canvas, using either the arc() or arcTo() methods of the context.

You can see an example of arcs drawn in HTML5 Canvas in this little game I wrote:
http://phrogz.net/tmp/connections.html
The game concept is not mine, just the implementation.

Note that with a squared-off line cap style, you can even draw wedges (circle segments) with a single arc command.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Thanks for the help - I run into 2 issues when doing arcs: 1- my onhover effects do not work unless arc is filled (which I know I am probably not doing it right but I am not sure how else to do it) and 2. the arcs cannot be filled since it's a round diagram with one arc inside another – ProgrammerFL23 Nov 16 '11 at 02:42
  • I guess all I need is a context.onMouseover (if exists?) that works in the arc border/line. Let me know if you know how please :) – ProgrammerFL23 Nov 16 '11 at 03:01
  • You need to read [this answer of mine](http://stackoverflow.com/questions/5596434/clear-canvas-rect-but-keep-background/5600671#5600671), the section titled _"Basics: HTML5 Canvas as a Non-Retained Drawing Mode Graphics API"_. The canvas cannot detect you hovering over a particular region. I strongly suggest that you consider using SVG instead of HTML5 Canvas. – Phrogz Nov 16 '11 at 04:08