css - Having multiple clickable segment in a html canvas circle that fills color in each area that is clicked -

i need create rating circle rating ranging between 1 5. have circle 5 different segments. on click of each segment color of segment should filled. being new design canvas, i'm unable figure out in splitting canvas multiple clickable segments. image

i able attain using css divs in place

<div class="main"> <div class="quarter quarter1"></div> <div class="quarter quarter2"></div> <div class="quarter quarter3"></div> <div class="quarter quarter4"></div> <div class="cutout"></div> </div> 

link jsfiddle

i because steadfast in purpose after many days. decide completion answer. hope answer complete.

var context;  var canvas_width;  var canvas_height;  var canvas_offset_left;  var canvas_offset_top;  var center_location_x = 100;  var center_location_y = 100;  var item_selected;    colors = ["#fff212", "#a8cf45", "#f58634" , "#fff212", "#a8cf45", "#f58634"];    var third = 1/3;  var width = 70;    window.onload = function(){  var canvas = document.getelementbyid("canvas");   context = canvas.getcontext("2d");      canvas_width = canvas.width;    canvas_height = canvas.width;    canvas_offset_left = canvas.offsetleft;    canvas_offset_top = canvas.offsettop;    drawall();  };    function drawall()  {    context.beginpath();    context.fillstyle='#ffffff';    context.fillrect(0, 0, canvas_width,canvas_height);    context.closepath();      for(var i=0; i<6; i++)       draw_item(i, false);  }    //handle mouse event ---------------  var cursor_x=0;  var cursor_y=0;    function move(e)  {  e=e||event;  cursor_x=e.pagex;  cursor_y=e.pagey;  if(e.target.id != 'canvas')      drawall();  }  document.onmousemove=move;  //---------------------------------      document.getelementbyid('canvas-div').onmousemove = hoveraction;  function hoveraction()  {      var offset_x = (center_location_x)+canvas_offset_left;      var offset_y = (center_location_y)+canvas_offset_top;        move_degree = math.atan2( cursor_x - offset_x ,  -(cursor_y - offset_y) );          drawall();        switch(true)        {          case (move_degree > 0 && move_degree < (math.pi/3) ):             draw_item(0, true);          break;          case (move_degree > (math.pi/3) && move_degree < (math.pi/3)*2 ):             draw_item(1, true);          break;          case (move_degree > (math.pi/3)*2 && move_degree < math.pi ):             draw_item(2, true);          break;          case (move_degree > -math.pi && move_degree < -math.pi+(math.pi/3) ):             draw_item(3, true);          break;          case (move_degree > -math.pi+(math.pi/3) && move_degree < -math.pi+(math.pi/3)*2 ):             draw_item(4, true);          break;          case (move_degree > -math.pi+(math.pi/3)*2  && move_degree < 0 ):             draw_item(5, true);          break;        }      }    function draw_item(item, ishover)  {       item_selected = item;       var color =  ishover ? "#0c10cc" : colors[item];       context.beginpath();       switch(item)        {          case 0 :            context.arc(100, 100, 60, 1.5*math.pi, (math.pi*1.5)+(third*math.pi) );          break;          case 1 :            context.arc(100, 100, 60, (math.pi*1.5)+(third*math.pi), (math.pi*1.5)+ (third*math.pi*2));          break;          case 2 :            context.arc(100, 100, 60, (math.pi*1.5)+(third*math.pi*2), (math.pi*0.5));          break;          case 3 :            context.arc(100, 100, 60, math.pi*0.5,  (math.pi*0.5)+(third*math.pi));          break;          case 4 :            context.arc(100, 100, 60, (math.pi*0.5)+(third*math.pi), (math.pi*0.5)+(third*math.pi*2));          break;          case 5 :            context.arc(100, 100, 60,  (math.pi*0.5)+(third*math.pi*2), (math.pi*1.5));          break;        }        context.strokestyle = color;        context.linewidth = width;        context.stroke();        context.closepath();  }

 #canvas-div   {     -webkit-border-radius: 50%;    border-radius: 50%;    height: 200px;    width : 200px;    overflow: hidden;    cursor: pointer;   }

<div id="canvas-div"><canvas height="200" width="200" id="canvas" onclick="alert(item_selected+1)"> browser not support</canvas></div>