Move canvas object towards a delivered position

[d4ne]

I'm trying to move a canvas object towards a onmousedown position, which gets sent from a user to the server.

But my problem is the following: The object on the canvas is only moving a little step towards the delivered position. There must be a problem which could be caused by the dest calculation.

Youtube video which shows my problem: https://www.youtube.com/watch?v=XxB1dNsuY38

A jsfiddle with a working example: http://jsfiddle.net/loktar/5d02ooaf/

Code which sends the position from the user to the server and which draws each user on the canvas:

<script type="text/javascript">
    var ctx = document.getElementById("ctx").getContext("2d");

    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight - 142;

    var socket = io();

    socket.on('newPositions', function(data)
    {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.fillStyle = "rgb(255,0,0)";
        ctx.beginPath();

        for(var i = 0; i < data.length; i++){
            ctx.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2);
        }

        ctx.closePath();
        ctx.fill();
    });

    document.onmousedown = function(event)
    {
        socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  - ctx.canvas.offsetTop, state: true});
    }

    document.onmouseup = function(event)
    {
        socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  - ctx.canvas.offsetTop, state: false});
    }
</script>

Part of the app.js code which contains the current position update code

var serv = require('http').Server(app);

var SOCKET_LIST = [];
var PLAYER_LIST = [];

var Player = function(id, x, y){
    var self = {
        x: 100,
        y: 100,
        id: id,
        number: "" + Math.floor(10 * Math.random()),
        mouseMovement: false,
        maxSpd: 5,
        radius: 10
    }
    self.updatePosition = function(x, y)
    {
        if(self.mouseMovement){
            // Problem movement
            var targetX = x;
            var targetY = y;

            var tx = targetX - self.x;
            var ty = targetY - self.y;
            var dist = Math.sqrt(tx * tx + ty * ty);

            var velX = (tx / dist) * self.maxSpd;
            var velY = (ty / dist) * self.maxSpd;

            if (dist > self.radius / 2) {
                self.x += velX;
                self.y += velY;
            }

            // Problem movement end
        }
    }

    return self;
}

var io = require('socket.io')(serv, {});
io.sockets.on('connection', function(socket){
    console.log('socket connection');

    socket.id = Math.random();
    SOCKET_LIST[socket.id] = socket;

    var player = Player(socket.id);
    PLAYER_LIST[socket.id] = player;

    socket.on('disconnect', function(){
        delete SOCKET_LIST[socket.id];
        delete PLAYER_LIST[socket.id];
    });

    socket.on('positionUpdate', function(data){
        player.mouseMovement = data.state;
        player.updatePosition(data.x, data.y);
    });
});

setInterval(function(){
    var pack = [];

    for(var i in PLAYER_LIST){
        var player = PLAYER_LIST[i];
        player.updatePosition();

        pack.push({
            x:player.x,
            y:player.y,
            number:player.number
        });
    }
    for(var i in SOCKET_LIST){
        var socket = SOCKET_LIST[i];
        socket.emit('newPositions', pack);
    }
}, 1000/30);

 

Explaination:

The following code sends the target position to the server:

document.onmousedown = function(event)
{
    socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  -ctx.canvas.offsetTop, state: true});
}

Then the following code will be triggered:

socket.on('positionUpdate', function(data){
    player.mouseMovement = data.state;
    player.updatePosition(data.x, data.y);
});

Which will set the player.mouseMovement to true and delivers the targeted x and y cordinates to the player.updatePosition function:

self.updatePosition = function(x, y)
{
    if(self.mouseMovement){
        // Problem movement
        var targetX = x;
        var targetY = y;

        var tx = targetX - self.x;
        var ty = targetY - self.y;
        var dist = Math.sqrt(tx * tx + ty * ty);

        var velX = (tx / dist) * self.maxSpd;
        var velY = (ty / dist) * self.maxSpd;

        if (dist > self.radius / 2) {
            self.x += velX;
            self.y += velY;
        }

        // Problem movement end
    }
}

 

I would appreciate any kind of help or suggestions.

[Jammy]

@d4ne I recommend adding a visual aid here to save yourself a lot of pain debugging. 

document.onmousedown = function(event)
{

//create a ball here

//position the ball at event.pageX - ctx.canvas.offsetLeft and event.pageY  -ctx.canvas.offsetTop
    socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  -ctx.canvas.offsetTop, state: true});
}

 

-- if the ball appears under your cursor you atleast know you're sending the co-ordinates correctly.

Also:

    self.updatePosition = function(x, y)
    {

//create another ball if not already existing

//set position to x and y
        if(self.mouseMovement){
            // Problem movement
            var targetX = x;
            var targetY = y;

If the new ball is in the correct position then you know you received the position correctly, and therefore there is an issue processing the "from->to" loop.