Overridden image on all previously loaded instances in createjs

Question

I'm creating a card game, where I need to load cards as separate display objects. I have loaded PNG file with 54 tiles with preloader. loader.getResult("deck") I had to extended Shape class so I can use some custom properties on each card (color, value, etc.)

Here is the card class (simplified), row and col are row and column in original png file to display, ratio is scale factor for displaying:

(function () {
    let RemiCard = function (container, tileWidth, tileHeight, row, col, ratio, color, order, value) {
        this.initialize(container, tileWidth, tileHeight, row, col, ratio, color, order, value);
    }
    let p = RemiCard.prototype = new createjs.Shape();
    
    p.color = 0;
    p.order = 0;
    p.value = 0;
    p.isClicked = false;
    p.initPosition = -1;
    
    p.initialize = function (container, tileWidth, tileHeight, row, col, ratio, color, order, value) {
        this.color = color;
        this.order = order;
        this.value = value;
        
        let matrix = new createjs.Matrix2D();
        matrix.translate(-col * tileWidth, -row * tileHeight);
        this.graphics.beginBitmapFill(loader.getResult("deck"), "no-repeat", matrix).drawRect(0, 0, tileWidth, tileHeight);
        container.addChild(this);
        this.scaleX = this.scaleY = ratio;
    }
    p.move = function (x, y) {
        this.x = x;
        this.y = y;
    };
    
    window.RemiCard = RemiCard;
}());

and here is a sample of creating new few instances of a class:

let card1 = new RemiCard(myCardsContainer, 188, 250, 3, 2, 0.8, someColor, someOrder, someValue);
card1.move(0, 0);
let card2 = new RemiCard(myCardsContainer, 188, 250, 5, 1, 0.8, someColor, someOrder, someValue);
card2.move(40, 0);
let card3 = new RemiCard(myCardsContainer, 188, 250, 0, 7, 0.8, someColor, someOrder, someValue);
card3.move(80, 0);

All events and properties are working for each instance fine (moving, drag/drop). That is expected of course. However, ALL cards are displaying a (cropped part of) image of the last loaded card, regardless of number of cards added. This is driving me crazy, it is annoying problem that I just can't figure out why. In this example all cards are displaying a tile in row 0 column 7 of PNG file (card3).

Any help is appreciated.

Edit:

I have tried to simplify class without any bitmap or so... and still have a weird problem:

(function () {
    let SimpleBox = function (container, color) {
        this.initialize(container, color);
    }
    SimpleBox.prototype = new createjs.Shape();
    
    SimpleBox.prototype.initialize = function (container, color) {
        container.addChild(this);
        this.graphics.beginFill(color).drawRect(0, 0, 100, 100);
    }
    SimpleBox.prototype.moveMe = function (x, y) {
        this.x = x;
        this.y = y;
    };
    
    window.SimpleBox= SimpleBox;
}());

and when I call 3 times that class:

let card1 = new SimpleBox(stage, "red");
card1.moveMe(500, 0);
let card2 = new SimpleBox(stage, "blue");
card2.moveMe(600, 0);
let card3 = new SimpleBox(stage, "yellow");
card3.moveMe(700, 0);

all three boxes are yellow??? How's that?

Answer 1

I have found a problem. Syntax I was using was "bad" variant of old-style createjs extending objects. I had to switch to new version of syntax.

Class below of SampleBox will now work just fine:

(function () {
    let SimpleBox = function (container, color) {
        this.Container_constructor();
        this.initialize(container, color);
    }

    let p = createjs.extend(SimpleBox, createjs.Container);
    
    p.initialize = function (container, color) {
        let shape = new createjs.Shape();
        shape.graphics.beginFill(color).drawRect(0, 0, 100, 100);
        this.addChild(shape);
        container.addChild(this);
    }
    p.moveMe = function (x, y) {
        this.x = x;
        this.y = y;
    };
    
    window.SimpleBox = createjs.promote(SimpleBox, "Container");
}());