How to add object to an array properly in p5.js?

Ok first before you read the code, know this is a javascript library called P5.js https://p5js.org

I noticed that my addMCS function was not adding an object to an array rather the screen goes blank and i get no response from the console.

var mcs = [];

function mouseCircle(x,y,s,color){
//constructor: mouseCircle(x,y,s,color)
    this.x=x;
    this.y=y;
    this.s=s;
    this.color = color;
    this.mouseOver = false;
}

mouseCircle.prototype.mouseCollision = function(){
  if(dist(this.x,this.y,mouseX,mouseY)<=this.s/2){

    this.mouseOver=true;
  }else{
    this.mouseOver = false;
  }
};


mouseCircle.prototype.addMCS = function(){

    //THIS HERE IS THE ISSUE!!
    mcs.push({this.x,this.y,this.s,this.color,this.mouseOver});
};

mouseCircle.prototype.Display = function(){
    if(this.mouseOver) {
        fill(this.color);
    } else {
        fill(255,255,255);
    }

    ellipse(this.x,this.y,this.s,this.s);
};

function setup() {
    createCanvas(1000,650);
}

var mc1;
var mc2;
var mc3;

var mc2Color;

function draw() {

    background(200,200,200);

    mc1 = new mouseCircle(275,450,50,'green');//constructs 1st circle
    mc1.mouseCollision();
    mc1.Display();
    mc1.addMCS();
    console.log(mcs[0]);

    /*
    mc2Color = color(0,0,255);
    mc2 = new mouseCircle(375,450,50,mc2Color);//constructs 2nd circle
    mc2.mouseCollision();
    mc2.Display();

    mc3 = new mouseCircle(275,350,50,color(255,0,0));//constructs 3rd circle
    mc3.mouseCollision();
    mc3.Display();

    mc4 = new mouseCircle(375,350,50,'yellow');//constructs 3rd circle
    mc4.mouseCollision();
    mc4.Display();

    */

    //mouseCircle(575,150,50);
    //mouseCircle(475,520,50);
    //mouseCircle(375,150,50);
}

I cant see any sort of logic or syntax errors and I believe I have memories of using this method before (making buttons).