Cocos creator 3. Create Sprite Frame from canvas element

[Horchynskyi]

Hi all. I am trying to create own drawn texture from canvas I created and setup it to the sprite component, but examples I frond look like impossible on Cocos Creator 3.

For example I can’t find " initWithElement" method in Texture2D class.

Can anyone please provide me an example how to create sprite frame from canvas element?
My current code is:

    const spriteHolder = this.spriteHolder = this.addComponent(Sprite);

    const canvas = this.canvas = document.createElement('canvas');

    canvas.height = 100;
    canvas.width = 100;

    const ctx2d = this.canvas.getContext('2d');;

    ctx2d.fillStyle = '#ff0000';
    ctx2d.fillRect(0, 0, 100, 100);

    const texture = this.texture = new Texture2D();

    texture.uploadData(canvas);

    spriteHolder.spriteFrame = new SpriteFrame();
    spriteHolder.spriteFrame.texture = texture;
    spriteHolder.spriteFrame.rect = new math.Rect(0, 0, 100, 100);

[Horchynskyi]

Ok I found the solution:

const sprite = this.getComponent(Sprite);

const canvas = document.createElement('canvas');

//Draw on canvas what you want...

const texture = new Texture2D();

sprite.spriteFrame = new SpriteFrame();
sprite.spriteFrame.texture = texture;

sprite.spriteFrame.rect = new math.Rect(0, 0, canvas.width, canvas.height);
texture.image = new ImageAsset(canvas);