HTML5 Canvas Drawing App Issue -

i have implement function draw on canvas drawfree,line,triangle,star when selecting other tool,it draw previous figure ex:if have selected drawfree @ first working fine,and when select draw line tool draw straight line,it calls previous function too.

javascript

    canvas.removeeventlistener('mousedown',draw_line);                                     canvas.removeeventlistener('mouseup',stop_draw_line);                                     canvas.removeeventlistener('mousemove',draw_dragging_line);                                     canvas.removeeventlistener('mousedown',draw_free);                                     canvas.removeeventlistener('mouseup',stop_draw);                                     canvas.removeeventlistener('mousemove',draw_dragging);                                     canvas.removeeventlistener('mousedown',draw_eraser);                                     canvas.removeeventlistener('mousemove',draw_eraser_dragging);                                     canvas.removeeventlistener('mouseup',stop_eraser);                 switch(str)                 {                     case "drawfree":                                     toolselect=1;                                     canvas.addeventlistener('mousedown',draw_free);                                     canvas.addeventlistener('mouseup',stop_draw);                                     canvas.addeventlistener('mousemove',draw_dragging);                                     break;                     case "line":    toolselect=2;                                     canvas.addeventlistener('mousedown',draw_line);                                     canvas.addeventlistener('mouseup',stop_draw_line);                                     canvas.addeventlistener('mousemove',draw_dragging_line);                                     break;                      case "circle":  toolselect=3;                                     canvas.addeventlistener('mousedown',draw_line);                                     canvas.addeventlistener('mouseup',stop_draw_line);                                     canvas.addeventlistener('mousemove',draw_dragging_line);                                     break; 

css

    <aside class="leftcontainer">         <div class="leftheader">tools</div>         <div class="leftdimpanel"></div>         <div class="toolset">         <div class="tool" id="drawfree" onclick="setactiveb('drawfree')">draw free</div>         <div class="tool" id="line" onclick="setactiveb('line')">line</div>         <div class="tool" id="circle" onclick="setactiveb('circle')">circle</div>         <div class="tool" id="rectangle" onclick="setactiveb('rectangle')">rectangle</div>         <div class="tool" id="polygon" onclick="setactiveb('polygon')">polygon</div>         <div class="tool" id="star" onclick="setactiveb('star')">star</div>         <div class="tool" id="eraser" onclick="setactiveb('eraser')">eraser</div>         </div>         </aside> 

how can remove event @ once canvas? can ?

in beginning of script need save canvas context variable:

var context = canvas.getcontext('2d'); 

then need reset current path context.beginpath(); before drawing new figure.

check on w3schools.