$(function () {
        App.whiteboard = $('#whiteboard');
        App.ctx = App.whiteboard[0].getContext("2d");

        // Connect mouse events
        App.whiteboard.on('mousedown mouseup mousemove', null, function (e) {
            if (!App._startedDrawing && e.type != "mousedown") return;
            App._startedDrawing = true;
            var offset = $(this).offset();
            var data = {
                x: (e.pageX - offset.left),
                y: (e.pageY - offset.top),
                type: e.handleObj.type,
                color: App.ctx.strokeStyle,
                imageData: App.whiteboard[0].toDataURL()
            };
            App.draw(data); // Draw yourself.
            App.socket.emit('do-the-draw', data); // Broadcast draw.
        });
        // Clear button
        $('#clear').on('click', function () {
            App.clear(); // Clear our screen
            App.socket.emit('clear'); // Broadcast clear.
        });
    });
    例如这一段，我想实现点击铅笔图像，来画图，可我像给清除按钮一样加个click事件，也不能实现。真的是不知道怎么改了。
    
    但是目前只实现了画笔和清除和同步功能了，我想实现一下功能，但不知道如何下手
    

var mousedown = function(e){

    // 在开始画时设置选择好的颜色
    context.strokeStyle= color;
    // context_bak.strokeStyle= color;
    // 在开始画时设置选择好的宽度
    // context_bak.lineWidth = size;
    e=e||window.event;
    startX = e.clientX - canvasLeft;
    startY = e.clientY - canvasTop;
    // context_bak.moveTo(startX ,startY );
    canDraw = true;            
    
    if(graphType == 'pencil'){
        context_bak.beginPath();
    }else if(graphType == 'circle'){
        context_bak.beginPath();
        // context.moveTo(startX ,startY );
        // context.lineTo(startX +2 ,startY+2);

        context_bak.closePath();
        context_bak.stroke();    
        
    }else if(graphType == 'rubber'){                            
        context_bak.clearRect(startX - size * 10 ,  startY - size * 10 , size * 20 , size * 20);                
    }    
};    

//鼠标离开 把蒙版canvas的图片生成到canvas中
var mouseup = function(e){
    e=e||window.event;
    canDraw = false;
    var image = new Image();
    if(graphType!='rubber'){    
        
        image.src = canvas_bak.toDataURL();
        image.onload = function(){
            context.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
            clearContext();
            // 将图像信息保存到数组中
            saveImageToAry();
        }
        var x = e.clientX   - canvasLeft;
        var y = e.clientY  - canvasTop;    
        context.beginPath();
        context.moveTo(x ,y);
        // context.lineTo(x +2 ,y+2);
        context.closePath();
        context.stroke();    
    }
};

//选择功能按钮 修改样式
function chooseImg(obj){
    var imgAry  = $("#drawController img");
    for(var i=0;i