How to draw the HTML 5 Canvas and split the quadrant wise and also make the circle rotate the quadrant clickable

Question

I have drawn the circle and separated the 6 equal quadrants using HTML 5 Canvas,

I have to make every quadrant clickable, when its clicked it has to rotate it and also needs to redirect to another page and make sure the clicked quadrant need to be set as a active state and the clicked quadrant move and need to set in different position.

Please kindly help me to solve this issue.

Thanks in advance.

Answer 1

At first register a click event on the canvas,

At the event callback find the coordinate of click event

cordinate_x = event.offsetX;
cordinate_y = event.offsetY;

then find from which quadrants the coordinate belongs

redraw that quadrants,

then find how much rotation your canvas need, apply that much rotation and redirect to another page which belongs to that quadrant..

try it, ask for any further help..

all the best.