如何使用canvas和socket.io绘制每个客户端的不同颜色？

Question

一个新的客户端会得到一个随机的颜色，所以当他们绘制时，他们必须用他各自的颜色绘制，并且画布必须显示所有不同的颜色，但是当我绘制所有的线条得到相同的颜色时，怎么能我得到各自客户的颜色？

这是我的代码：

客户方：

var socket = io();
var user;
var colorPencil;
socket.on('connect', function(){
        bootbox.dialog({
          message: "Escriba su nombre por favor: <input type='text' id='usuario'>",
          title: "Bienvenido a la pizarra multiusuarios",
          buttons: {
            main: {
              label: "Ingresar",
              className: "btn-primary",
              callback: function() {           
                user = $('#usuario').val();
                socket.emit('nuevoUser', user);
                socket.emit('noti', user);
                random();
              }
            }
          }
        });
});

var colors = new Array();
colors = ["red", "blue", "yellow", "lightblue", "lightgreen"];
var colorRandom;
var resColors = new Array();

socket.on('notificacion', function(user){
    $.notify({
    // options
    message: '<b>'+ user +'</b> se ha conectado'
    },{
        // settings
        type: 'info'
    });

});

socket.on('welcome', function(user){
    $.notify({
    // options
    message: 'Bienvenido <b>'+ user +'</b>'
    },{
        // settings
        type: 'success'
    });
});

var contColor = -1;
function random(){
    contColor++;
    colorRandom = Math.floor(Math.random() * (4 - 0)) + 0;
    var ggColor = colors[colorRandom];
    resColors.push(ggColor);
    colorPencil = resColors[contColor];
    socket.emit('colorCliente', colorPencil);
};

socket.on('nuevo', function(nombre){
    $('#user').append($('<li>').text(nombre));
});

var msg;

socket.on('chat msj', function(nombre, msg){
    $('#mensaje').append($('<li id="liMSJ">').text(nombre+": "+msg));
});

socket.on('cantUsers', function(contador){
    $('#cantUser').empty();
    $('#cantUser').append($('<li>').text(contador));
});

socket.on('menosU', function(u){
    $('#cantUser').empty();
    $('#cantUser').append($('<li>').text(u));
});

var movimientos = new Array();
var pulsado;
var context;

    function lienzo() {
        var canvasDiv = document.getElementById('pizarra');
        canvas = document.createElement('canvas');
        canvas.setAttribute('width','840');
        canvas.setAttribute('height','600');
        canvasDiv.appendChild(canvas);
        context = canvas.getContext("2d");

        $('canvas').mousedown(function(e){
            pulsado = true;
            socket.emit('dibuja', [e.pageX - this.offsetLeft,e.pageY - this.offsetTop,false]);
        });// la variabe false es porque aún no comenzamos a dibujar
        $('canvas').mousemove(function(e){
            if(pulsado){
                socket.emit('dibuja', [e.pageX - this.offsetLeft,e.pageY - this.offsetTop,true])
            }
        });
        $('canvas').mouseup(function(e){
            pulsado = false;
        });
        $('canvas').mouseleave(function(e){
            pulsado = false;
        });

        $('.borrarCanva').click(function(){
            socket.emit('eraseCanva');
        });
    }; // FIN DE LIENZO()
var drawing = function(mov, col){
    movimientos.push(mov);
    context.lineJoin='round';
    context.lineWidth = 6;
    context.strokeStyle = col;
    for(var i = 0;i<movimientos.length;i++){
        context.beginPath();
        if(movimientos[i][2] && i){
            context.moveTo(movimientos[i-1][0],movimientos[i-1][1]);
        } else {
            context.moveTo(movimientos[i][0],movimientos[i][1]);
        }
        context.lineTo(movimientos[i][0],movimientos[i][1]);
        context.closePath();
        context.stroke();
    }
};// FIN DE DRAWING

socket.on('update',function(movimientos, col){
    drawing(movimientos, col);
});

socket.on('limpiarCanva', function(){
    movimientos.length = 0;
});

socket.on('desconectado', function(ppuu){
    $.notify({
    // options
    message: '<b>'+ ppuu +'</b> se ha desconectado' 
    },{
        // settings
        type: 'warning'
    });
});

服务器端：

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var path = require("path");

app.use(express.static(path.join(__dirname, '/public')));

app.get('/', function(req, res){

    res.sendFile(__dirname + "/views" + "/index.html");
});

// socket escuchando
var contador = 0;
io.on('connection', function(socket){
    contador++;

    console.log("alguien se ha conectado");

    io.sockets.emit('cantUsers', contador);

    socket.on('noti', function(user){
        var uuser = user;
        socket.broadcast.emit('notificacion', uuser);
        socket.emit('welcome', uuser);
    });

    socket.on('colorCliente', function(color){
        socket.color = color;
        console.log(socket.color);
    });

    socket.on('dibuja', function(movimientos){
        socket.movimientos = movimientos;
        io.sockets.emit('update', socket.movimientos, socket.color);
    });

    socket.on('chat mensaje', function(msg){
        console.log("mensaje chat");
        io.sockets.emit('chat msj', socket.nombre, msg);
    });
    // add new client////////////////////////////////////////
    socket.on('nuevoUser', function(person){
        socket.nombre = person;
        console.log(socket.nombre);
        io.sockets.emit('nuevo', socket.nombre);
    });

    socket.on('eraseCanva', function(){
        io.sockets.emit('limpiarCanva');
    });

    socket.on('disconnect', function(){
        console.log("Un usuario se ha desconectado");
        io.sockets.emit('desconectado', socket.nombre);

        contador-=1;
        io.sockets.emit('menosU', contador);
    });

});

http.listen(3000, function(){
    console.log('pizarra corriendo en port 3000');
});

HTML：

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Pizarra Multiusuario</title>
    <link rel="stylesheet" type="text/css" href="/styles.css">
    <link rel="stylesheet" type="text/css" href="/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/animate.css">

    <script src = "/socket.io/socket.io.js"></script>
    <script src = "/jquery-1.12.2.min.js"></script>
    <script src = "/bootstrap.min.js"></script>
    <script src = "/bootstrap-notify.min.js"></script>
    <script src = "/bootbox.min.js"></script>
    <script src = "/scripts.js"></script>
</head>
    <body onload="lienzo()">
        <header>
            <div class="container-fluid" id="titulo">
                <h2>Pizarra Multiusuarios</h2>
            </div>
        </header>
        <main>
            <div id="pizarra"></div>
            <button class="btn btn-info borrarCanva">Borrar Todo</button>
            <div id="chat">
                <form action="">
                    <input id="m" autocomplete="off" placeholder="Escriba su mensaje"/>

                    <button type="button" class="btn btn-success btEnviar" id="btEnviar">Enviar</button>

                    <ul id="mensaje"></ul>
                </form>
            </div>
        </main>
        <footer>
            <div id="footer" class="container-fluid">
                <h3>Usuarios Conectados</h3>
                <ul id="user"></ul>
                <h3>Cantidad de Usuarios</h3>
                <ul id="cantUser"></ul>
            </div>
        </footer>

        <div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">
            <button type="button" aria-hidden="true" class="close" data-notify="dismiss"></button>
            <span data-notify="icon"></span>
            <span data-notify="title"></span>
            <span data-notify="message"></span>
            <a href="{3}" target="{4}" data-notify="url"></a>
        </div>
        <script>
        var msg;
            $('#btEnviar').on('click', function(){
                console.log('click');
                msg = $('#m').val();
                if(msg != ''){
                    socket.emit('chat mensaje', msg);
                    $('#m').val('');
                    return false;
                } else {
                    $.notify({
                    // options
                    message: 'Por favor escriba un mensaje' 
                    },{
                        // settings
                        type: 'danger'
                    });
                    return false;
                }
            });
        </script>
    </body>
</html>

谢谢！