Can't seem to find how to export PNG with invisible background

[VadimKht]

When exporting it exports with black background. The option to have background invisible doesn't seem to exist and the color of font will always be the same. I really like this tool and so far i just download it, invert colors, magic stick the background, delete it, aaaannnd.
My game looks amazing.
The quality of text below on the images is purely my fault as i wasn't very careful with removing background or figuring a better way to do it

[Lucide]

Hello, this issue is valid.
Now I'm busy with uni so I won't have time in the near future to add this.
Main issue is the deprecation of most of the tools/actions/dependencies used by this project (web moves fast!)
Perhaps I will be able to prop up a bookmarklet which does this in the meantime

[Lucide]

Ok, bookmark this bookmarklet, and subsequent refreshes should produce a transparent background, and resolve your aliasing issues when attempting to remove it (togglable).

javascript: (() => {
    const S = Symbol.for('user.canvas.patch.v1');

    if (CanvasRenderingContext2D.prototype.__origFillRect) {
        CanvasRenderingContext2D.prototype.fillRect = CanvasRenderingContext2D.prototype.__origFillRect;
        delete CanvasRenderingContext2D.prototype.__origFillRect;
        console.log('[patch] reverted to fillRect patch');
        return;
    }

    const orig = CanvasRenderingContext2D.prototype.fillRect;
    CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h) {
        if (x === 0 && y === 0 && w === this.canvas.width && h === this.canvas.height) {
            console.log('[patch] fillRect replaced by clearRect');
            return this.clearRect(x, y, w, h);
        }
        return orig.call(this, x, y, w, h);
    };

    CanvasRenderingContext2D.prototype.__origFillRect = orig;
    console.log('[patch] fillRect→clearRect active');
})();

This one replaces text colour to black (togglable):

javascript: (() => {
    if (CanvasRenderingContext2D.prototype.__origFillStyle) {
        Object.defineProperty(CanvasRenderingContext2D.prototype, 'fillStyle', CanvasRenderingContext2D.prototype.__origFillStyle);
        delete CanvasRenderingContext2D.prototype.__origFillStyle;
        console.log('[patch] reverted fillStyle patch');
        return;
    }

    const desc = Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, 'fillStyle');
    Object.defineProperty(CanvasRenderingContext2D.prototype, 'fillStyle', {
        set(value) {
            if (value === 'white') {
                console.log('[patch] fillStyle "white" → "black"');
                value = 'black';
            }
            desc.set.call(this, value);
        },
        get() {
            return desc.get.call(this);
        },
    });

    CanvasRenderingContext2D.prototype.__origFillStyle = desc;
    console.log('[patch] fillStyle→black active');
})();

Perform an operation that redraws the canvas to see the effect. They are togglable.
Github doesn't allow data links with data urls so you'll have to create bookmarks manually.

Create a new bookmark

1. Open your browser's bookmark manager (e.g., in Chrome, press Ctrl + Shift + O).
2. Create a new bookmark by right-clicking on the bookmarks bar or folder and selecting "Add Page" or "Add New Bookmark".
3. Name the bookmark in the "Name" field.
4. Copy the bookmarklet's JavaScript code.
5. Paste the code into the "URL" or "Location" field, making sure to replace any existing URL. The code should start with javascript:.
6. Save the new bookmark.

[Lucide]

Leave the issue open until I get to implement this properly.

[VadimKht]

thank you!

web moves fast but from what i know the base idea of how things are done should be same. that's why i dont like using libraries =D

it's ok, i can wait for fix. i just wish everyone who uses it in future will have chance to do things more flexibly. and i am reaaaally procrastinating