Change graphics object with images

Phaser 3
1 
document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: { create },
    banner: false
}; 

function create () {
    this.add.text(10,10, 'Click to start')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
    
    this.add.text(250 ,10, 'TileSprite')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
    
    let graphics = this.make.graphics();
    createReelGraphics(graphics);
    
    this.add.image( 380, 10, 'img' ).setOrigin(0).setScale(1.5);
    
    this.reel1 = this.add.tileSprite(110, 85, 10, 10, 'img').setScale(3);
    this.reel2 = this.add.tileSprite(145, 85, 10, 10, 'img').setScale(3);
    this.reel3 = this.add.tileSprite(180, 85, 10, 10, 'img').setScale(3);

    startSpin(this);

    this.input.on('pointerdown', () => startSpin(this));

}

function startSpin(scene){

    setRandomStartPosition(scene);
    scene.tweens.add({
        targets: [scene.reel1, scene.reel2, scene.reel3] ,
        tilePositionY: '+=100',
        duration: 800,
    });
}

function setRandomStartPosition(scene){
    scene.reel1.tilePositionY = Phaser.Math.Between(0, 8) * 10
    scene.reel2.tilePositionY = Phaser.Math.Between(0, 8) * 10
    scene.reel3.tilePositionY = Phaser.Math.Between(0, 8) * 10
}

new Phaser.Game(config);


function createReelGraphics(graphics){
    let colors = [ 0xFF0000, 0xFF00DC, 0xB200FF, 0x4800FF, 0x0094FF, 0x00FFFF, 0x00FF90, 0x4CFF00, 0xFFD800, 0xFF6A00];
    
    for(let idx in colors){
        graphics.fillStyle(colors[idx]);
        graphics.fillRect(0, (idx * 10), 10, 10 );
    }
    
    graphics.generateTexture('img', 10, colors.length * 10);
}

This is a working code, now i’d like to replace the color with images those are already preloaded. How can do it?

2

I think you can use a CanvasTexture for that.

3

the seems to be a answer on stackoverflow that seems to solves a similar problem, with canvasTexture.
As @samme mentioned with canvasTexture (and renderTexture). I hope this helps.