I want to make a synchronous electronic whiteboard using canvas, node.js,socket.io and express:

  node.js, question

具体要实现的功能就像图中所示,单独弄一个绘图板已经可以实现了,但是连接上同步就不知道怎么改了

$(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<imgAry.length;i加加){
        $(imgAry[i]).removeClass('border_choose');
        $(imgAry[i]).addClass('border_nochoose');                
    }
    $(obj).removeClass("border_nochoose");
    $(obj).addClass("border_choose");
}
// 鼠标移动
var  mousemove = function(e){
    e=e||window.event;
    var x = e.clientX   - canvasLeft;
    var y = e.clientY  - canvasTop;    
    //方块  4条直线搞定
    if(graphType == 'square'){
        console.log(graphType);
        if(canDraw){
            context_bak.beginPath();
            clearContext();
            context_bak.moveTo(startX , startY);                        
            context_bak.lineTo(x  ,startY );
            context_bak.lineTo(x  ,y );
            context_bak.lineTo(startX  ,y );
            context_bak.lineTo(startX  ,startY );

            context_bak.closePath();

            context_bak.stroke();
        }
    //直线
    }else if(graphType =='line'){                        
        if(canDraw){
            context_bak.beginPath();
            clearContext();
            context_bak.moveTo(startX , startY);
            context_bak.lineTo(x  ,y );
            context_bak.closePath();
            context_bak.stroke();
        }
    //画笔
    }else if(graphType == 'pencil'){
        if(canDraw){
            context_bak.lineTo(e.clientX   - canvasLeft ,e.clientY  - canvasTop);
            context_bak.stroke();                        
        }
    //圆未画得时候 出现一个小圆
    }else if(graphType == 'circle'){                        
        clearContext();
        if(canDraw){
            context_bak.beginPath();            
            var radii = Math.sqrt((startX - x) *  (startX - x)  加 (startY - y) * (startY - y));
            context_bak.arc(startX,startY,radii,0,Math.PI * 2,false);                                    
            context_bak.stroke();
        }
        else{    
            context_bak.beginPath();                    
            context_bak.arc(x,y,10,0,Math.PI * 2,false);
            context_bak.stroke();
        }
    //涂鸦 未画得时候 出现一个小圆
    }else if(graphType == 'handwriting'){                                            
        if(canDraw){
            context_bak.beginPath();    
            context_bak.strokeStyle = color;
            context_bak.fillStyle  = color;
            context_bak.arc(x,y,size*10,0,Math.PI * 2,false);        
            context_bak.fill();
            context_bak.stroke();
            context_bak.restore();
        }else{    
            clearContext();
            context_bak.beginPath();                    
            context_bak.fillStyle  = color;
            context_bak.arc(x,y,size*10,0,Math.PI * 2,false);
            context_bak.fill();
            context_bak.stroke();
        }
    //橡皮擦 不管有没有在画都出现小方块 按下鼠标 开始清空区域
    }else if(graphType == 'rubber'){    
        context_bak.lineWidth = 1;
        clearContext();
        context_bak.beginPath();            
        context_bak.strokeStyle =  '#000000';                        
        context_bak.moveTo(x - size * 10 ,  y - size * 10 );                        
        context_bak.lineTo(x 加 size * 10  , y - size * 10 );
        context_bak.lineTo(x 加 size * 10  , y 加 size * 10 );
        context_bak.lineTo(x - size * 10  , y 加 size * 10 );
        context_bak.lineTo(x - size * 10  , y - size * 10 );    
        context_bak.stroke();        
        if(canDraw){                            
            context.clearRect(x - size * 10 ,  y - size * 10 , size * 20 , size * 20);
                                    
        }            
    }
};

For example, the above code is originally a code implementation where a separate whiteboard can be used to select the brush type. Now I want to merge it into the system that can pass insufficient transmission, but I don’t know how to change it.

I don’t quite understand your problem is What? Canvas doesn’t work? Websocket unfamiliar?