I'm trying to write a simple tic tac toe. I'm able to get the cell to have a "o" state when the mouse is pressed but when I attempt to write in an "x" state, it's acting really wonky. Ellipses seem to work fine, but other objects such as lines or rects don't seem to work. Can someone explain this to me....thanks in advance.

int cols=3;
int rows=3;

Cell[][] board= new Cell[cols][rows];

void setup() {
  size(300,300);
  smooth();

  for(int i=0; i<cols; i++) {
    for(int j=0; j<rows; j++) {
      board[i][j]= new Cell(i*100,j*100,100,100);
    }
  }
}
void draw() {
  for(int i=0; i<cols; i++) {
    for(int j=0; j<rows; j++) {
      board[i][j].display();
      board[i][j].checkCell();
    }
  }
}

//CELL CLASS

class Cell {
  float x;
  float y;
  float w;
  float h;
  int state;
  Cell (float _x, float _y, float _w, float _h) {
    x= _x;
    y= _y;
    w= _w;
    h= _h;
    state=0;
  }
  void display() {
   
    if(state== 0) {
      stroke(0);
    fill(255);
    rect(x,y,w,h);
    }

    else if(state== 1) {
      stroke(0);
    fill(255);
    rect(x,y,w,h);
     
      fill(255);
      ellipse(x+w/2, y+h/2,50,50);
    }

    else if (state== 2) {
      stroke(0);
    fill(255);
    rect(x,y,w,h);
     
      line(x+20,y+20,w-20,h-20);
      line(x+20,h-20,w-20,y+20);
    }
  }

  void checkCell() {
    if(mousePressed) {
      if (mouseButton== LEFT && mouseX > x && mouseX < x+w
        && mouseY > y && mouseY < y+h) {
        state= 1;
      }
      else if (mouseButton== RIGHT && mouseX > x && mouseX < x+w
        && mouseY > y && mouseY < y+h) {
        state= 2;
      }
    }
  }
}