Replacing a Graphics sprite

[juliogomez7]

I made a canvas class for a drawing app and set a white rectangle made with Graphics.drawRect() as its sprite, but I need to change its fill color when I click it. It seems that's not possible according to the few info I've found, so I want to draw another rectangle and change the container sprite but that's not working. Am I doing something wrong? How should I replace the sprite?

 

game.createClass('Canvas', {

  init: function() {

    this.drawContainer = new game.Container();

    var board = new game.Graphics();
    board.visible = false;
    board.beginFill(0xFFFFFF);
    board.lineStyle(0);
    board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 );
    board.endFill();

    this.sprite = fill;

    this.sprite = board;
    this.sprite.interactive = true;

    this.sprite.click = this.click.bind(this);

    this.drawContainer.addChild(this.sprite);

    game.scene.stage.addChild(this.notebookContainer);

  },

  click: function(event) {

    var board = new game.Graphics();
    board.visible = false;
    board.beginFill(0xFF0000);
    board.lineStyle(0);
    board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 );
    board.endFill();

    this.sprite = board;

  }

});