Positioning on Canvas with multiple sockets - node.js

Question

So I am trying to make a node multiplayer game using socket.io and the HTML5 canvas.
I have gotten the objects to appear on each other's client canvas, but their positions are way off. How do I position the objects so that they will show up properly on the client side?
Here is my code.
Client:
var socket;
var ship;
var cnv;
function setup() {
cnv = createCanvas(1000, 1000);
translate(120, 120);
var x = (windowWidth - width) / 2;
var y = (windowHeight - height) / 2;
cnv.position(x, y);
background(51);
socket = io('http://localhost:3000');
ship = new Avatar();
socket.on('pos', newDrawing)
var data = {
x:ship.pos.x,
y:ship.pos.y,
r:ship.r,
heading:ship.heading
}
socket.emit('start', data)
}
function newDrawing(data){
for(var i =0; i< data.length;i++){
if(data[i].id != socket.id){
rotate(data[i].h+ PI/2)
var x=data[i].x;
var y= data[i].y
var r = data[i].r
console.log(r)
triangle(x+ -data[i].r, y+data[i].r, x+data[i].r,y+data[i].r,x+ 0,y+-data[i].r)
}
}
}
function keyPressed(){
if(keyCode == 65){
ship.setRotation(-0.1)
//ship.vel.x += -speed;
}
//Right
if(keyCode == 68){
ship.setRotation(0.1)
}
if(keyCode == 87){
ship.boosting(true);
}
}
function keyReleased(){
ship.setRotation(0);
ship.boosting(false);
}
function draw() {
//background(51);
//console.log(cnv)
ship.render();
ship.turn()
ship.update();
ship.edges();
var data = {
x:ship.pos.x,
y:ship.pos.y,
r:ship.r,
heading:ship.heading
}
socket.emit('pos', data)
//clear()
}
Object
class Avatar{
constructor(){
this.pos=createVector(1000,1000);
this.r=50;
this.vel=createVector(0,0)
this.color = 'red';
this.move=false;
this.heading=0;
this.rotation=0;
this.isBoost=false;
}
update(){
if(this.isBoost){
this.boost();
}
this.pos.add(this.vel);
this.vel.mult(.99)
}
setRotation(a){
this.rotation=a;
}
boosting(a){
this.isBoost=a;
}
boost(){
var force= p5.Vector.fromAngle(this.heading);
this.vel.add(force);
}
turn(){
this.heading+= this.rotation;
}
edges(){
if(this.pos.x>width+this.r){
this.pos.x=-this.r;
} else if(this.pos.x<-this.r){
this.pos.x=width +this.r;
}
if(this.pos.y>height+this.r){
this.pos.y=-this.r;
} else if(this.pos.y<-this.r){
this.pos.y=height +this.r;
}
}
render(){
//clear()
//translate(this.pos.x, this.pos.y)
rotate(this.heading+ PI/2)
//rect(this.r,-this.r,this,this.r)
fill(this.color)
triangle(-this.r,this.r,this.r,this.r,0,-this.r)
}
}
Server
var express=require('express');
var app=express();
var server = app.listen(3000)
var ships=[];
function Avatar(id,x,y,r,h){
this.id=id;
this.x = x;
this.y= y;
this.r=r;
this.h=h;
}
console.log("Server on %s", server.address().port)
// function listen(){
// var host= server.address().address;
// var port= server.address().port;
// console.log('Server running on %s',port )
// }
app.use(express.static('public'));
var socket=require('socket.io');
var io=socket(server);
io.sockets.on('connection',function(socket){
console.log("New Socket:" + socket.id)
socket.on('start',function(data){
ships.push(new Avatar(socket.id, data.x, data.y, data.r, data.heading));
//console.log(ships)
})
socket.on('pos',function(data){
var ship;
for(var i =0; i< ships.length; i++){
if(ships[i].id == socket.id){
ships[i].x=data.x;
ships[i].y=data.y;
ships[i].r=data.r;
ships[i].h=data.heading;
}
}
//console.log(ships[0])
//console.log(ships)
//console.log(socket.id)
//io.sockets.emit('pos',ships)
socket.broadcast.emit('pos',ships)
})
socket.on('disconnect' , function(){
for(var i =0; i< ships.length; i++){
if(ships[i].id == socket.id){
console.log(socket.id + " Has Left")
ships.splice(i,1);
}
}
})
})
Part of the issue I am seeing is that the other clients objects are being drawn as though their point of origin is not in the center of its own object.

Answer 1

I figured out why it was an issue. I was unaware that the translate and rotate functions were not object specific. Meaning, that when I was rotating for my client, it was rotating the perspective of the canvas, not the object. So any other objects would be visibly rotating around it.