adding new drawing functions

So it looks like all your functionality is placed in anonymous functions within the event handlers. I would separate these into their own functions and just call the function inside the event handler. This will make it easier for you to modify later, and will allow you to more easily select which drawing method to use when the mouse is clicked.

Also, you have two 'click' handlers being called here, so both of these are being run when you click the mouse. You need to get rid of one of these, and just have one 'click' handler that will execute the appropriate function based on the selection. (see my example above).

Hope this helps!

Would need to see your code to help more, but I personally like to switch statements in cases like this. Here is an example using jquery:

function Drawing() {...}
function Rectangle() {...}

$(document).on('mousedown', function() {

   var selection = $("#radioDiv input[type='radio']:checked"); 

   switch(selection) {
      case "drawing": 
         Drawing();
         break;
      case "rectangle":
         Rectangle();
         break;
      ...
   }
});

Again, would need to see your code to see how exactly to help. But this is how I would break it up.

Thank you Jake Lundberg for your advice. I 've seperated anonymous functions into their own functions, and now functions pencil() and drawRectangle() are called inside an event handler. But it still doesn't work.

http://jsfiddle.net/bmat1/h1fjfsdp/

After refreshing the page, when function rectangle is selected first, it draws rectangle and than after selecting pencil it draws, but after selecting rectangle again it still draws with pencil. On the other hand when pencil is selected first it is impossible to draw rectangle. Have you got any idea how to solve this