Loading canvas image dynamically in Javascript

Hi,

In my game, I use a canvas to create an image. Now I'm wanting to load it into my rive instance. Here's a quick example of how I'm creating my image:

var canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 150; var context = canvas.getContext('2d'); context.imageSmoothingEnabled = true; context.imageSmoothingQuality = "high"; context.scale(.5,.5); CharacterCreation.drawCharacter(-410,-90,context); var portraitImage = canvas.toDataURL("image/png");

Then I tried setting it to the asset:

assetLoader: (asset, bytes) => {
                        if(asset.name == "PlayerPortrait") {
                            this.loadPlayerImage(asset, card.character);
                            return true;
                        }
                        return false;
                    }

static async loadPlayerImage(asset, character) {
        console.log("Replacing Player Portrait");
        // replace the player portrait with the customized one
        var image = await rive.decodeImage(character.portraitSmall.image.bytes);
        asset.setRenderImage(image);
        return true;
    }

But this just results in a blank image where it should be and no error

I've also tried submitting the image directly but I get the same result.

I've also tried setting the export option for the image to Referenced instead of embedded but this results in a lot of errors. I'd like to have the embedded image as a placeholder anyway until the image is loaded.

Thank you!