Why is camera's position not correctly calculated (canvas)

<html>
<head>
 <title>Play Agario Clone</title>

 <style>
 body {
  margin: 0;
  padding: 0;
 }
 </style>
</head>
<body>
 <canvas id="game">
  kindly update your browser.
 </canvas>

 <script>
 var 
 canvas, 
 ctx, 
 width = innerWidth, 
 height = innerHeight,
 mouseX = 0,
 mouseY = 0;

 var

 camera = {
  x: 0,
  y: 0,

  // camera
  update: function(obj) {
   var farthestBlobX = Math.max.apply(0, obj.blobs.map(function(cell) { return cell.x }));
   var farthestBlobY = Math.max.apply(0, obj.blobs.map(function(cell) { return cell.y }));
   var closestBlobX = Math.min.apply(0, obj.blobs.map(function(cell) { return cell.x }));
   var closestBlobY = Math.min.apply(0, obj.blobs.map(function(cell) { return cell.y }));
   var x = farthestBlobX - closestBlobX;
   var y = farthestBlobY - closestBlobY;
   var length = Math.sqrt(x * x + y * y);

   this.x = length/2 - width/2;
   this.y = length/2 - height/2;
  }
 },

 player = {
  defaultMass: 54,
  x: 0,
  y: 0,
  blobs: [],

  update: function () {
   for (var i = 0; i < this.blobs.length; i ++) {
    var x = mouseX + camera.x - this.blobs[i].x;
    var y = mouseY + camera.y - this.blobs[i].y;
    var length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    var speed = 54/this.blobs[i].mass;
    
    this.blobs[i].velX = x/length * speed * Math.min(1, Math.pow(x / this.blobs[i].mass, 2));
    this.blobs[i].velY = y/length * speed * Math.min(1, Math.pow(x / this.blobs[i].mass, 2));

    this.blobs[i].x += this.blobs[i].velX;
    this.blobs[i].y += this.blobs[i].velY;

    for (var j = 0; j < this.blobs.length; j ++) {
     if (j != i && this.blobs[i] !== undefined) {
            var blob1 = this.blobs[i];
            var blob2 = this.blobs[j];
            var x = blob2.x - blob1.x;
            var y = blob2.y - blob1.y;
            var dist = Math.sqrt(x * x + y * y);

            if (dist < blob1.mass + blob2.mass) {
              x /= dist;
              y /= dist;
              blob1.x = blob2.x - x * (blob1.mass + blob2.mass);
              blob1.y = blob2.y - y * (blob1.mass + blob2.mass);
            }
          }
    }
   }

   this.x += (mouseX - width/2)/(width/2) * 1;
   this.y += (mouseY - height/2)/(height/2) * 1
  },

  split: function (cell) {
   cell.mass /= 2;

   this.blobs.push({
    x: cell.x,
    y: cell.y,
    mass: cell.mass
   });
  },

  draw: function () {
   for (var i = 0; i < this.blobs.length; i ++) {
    ctx.fillStyle = "red";
    
    ctx.beginPath();
    ctx.arc(-camera.x + this.blobs[i].x, -camera.y + this.blobs[i].y, this.blobs[i].mass, 0, Math.PI*2);
    ctx.fill();
    ctx.closePath();
   }
  }
 };

 function handleMouseMove (e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
 }

 function setup () {
  canvas = document.getElementById("game");
  ctx = canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;

  addEventListener("mousemove", handleMouseMove);

  player.blobs.push({
   x: 0,
   y: 0,
   mass: player.defaultMass
  });
  player.blobs.push({
   x: 100,
   y: 100,
   mass: player.defaultMass/2
  });
  player.blobs.push({
   x: 100,
   y: 100,
   mass: player.defaultMass*2
  });

  var loop = function () {
   update();
   draw();
   requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
 }

 function update () {
  camera.update(player);
  player.update();
 }

 function draw () {
  ctx.fillStyle = "#fff";
  ctx.fillRect(0, 0, width, height);

  player.draw();
 }

 setup();
 </script>
</body>
</html>