Socket.io/Node.JS array elements transmission

I have an array of canvas elements, and each one is responsible for using the defined functions to interact with these elements.

I do, although have a problem.

Whenever I try to transmit the currently clicked canvas element through socket.io there seems to be a problem recognizing the previousInfo variable, which should store the information for where the cursor has been.

Example:

canvas[i].onTouchStart = onTouchStartEventFunction;

canvas[i].onTouchMove = onTouchMoveEventFunction;

canvas[i].onTouchEnd = onTouchEndEventFunction;

this creates the canvas array and stores each instance on the array.

The functions:

var onTouchStartEventFunction = function(info, index, count, event) {
draw(info.layerX, info.layerY, event.type, info.layerX, info.layerY, this);
    socket.emit('touchevent', {
        x: info.layerX,
        y: info.layerY,
        e: event.type,
        px: info.layerX,
        py: info.layerY,
        idx: this
});
}

var onTouchMoveEventFunction = function(info, index, count, previousInfo, event) {
if(previousInfo === null) 
{} 
else {
    document.getElementById("timer").innerHTML = "X: " + info.layerX + " Y: " + info.layerY + " pX:" + previousInfo.layerX + " pY:" + previousInfo.layerY;
    draw(info.layerX, info.layerY, event.type, previousInfo.layerX, previousInfo.layerY, this);
    socket.emit('touchevent', {
        x: info.layerX,
        y: info.layerY,
        e: event.type,
        px: previousInfo.layerX,
        py: previousInfo.layerY,
        idx: this
    });
}
}

var onTouchEndEventFunction = function(info, index, count, event) {
draw(info.layerX, info.layerY, event.type, info.layerX, info.layerY, this);
socket.emit('touchevent', {
    x: info.layerX, 
    y: info.layerY,
    e: event.type,
    px: info.layerX,
    py: info.layerY,
    idx: this
});
}

Everything works fine if I don't pass the 'idx:this' through sockets, and the previousInfo works as expected. However, whenever I starting using the 'idx:this' the pX and pY (the previousInfo X and Y coordinates) are always the same, no changes.

The worst is that this happens for every single instance, and wherever I click, the pX and pY points always stay the same.

So, given this, can anyone point me to what I'm doing wrong?

Best Regards

seems like something missing from our problem description, but I would try creating a self invoking function:

 var onTouchEndEventFunction = function(info, index, count, event) {
     draw(info.layerX, info.layerY, event.type, info.layerX, info.layerY, this);
     (function (canvas) {
        socket.emit('touchevent', {
            x: info.layerX, 
            y: info.layerY,
            e: event.type,
            px: info.layerX,
            py: info.layerY,
            idx: canvas
    });)(this);
  }