Q:

HTML5 Canvas Drawing App Issue

I have implement all the function to draw on the canvas like drawFree,Line,Triangle,Star But when I am Selecting other tool,it also draw the previous figure ex:If I have Selected drawFree at first then it is working fine,and when I select draw Line tool to draw a Straight Line,it calls the 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 I remove all event at once from canvas?
Can anyone help ?

A:

In the beginning of your script you need to save canvas context to variable:
var context = canvas.getContext('2d');

Then you need to reset current path by context.beginPath(); before drawing new figure.
Check this on W3Schools.

