Hard to differentiate Surface multiple wasi-gfx instances are present

[SebastienGllmt]

Currently, a Surface is created like this

record create-desc {
    height: option<u32>,
    width: option<u32>,
}

let canvas = surface::Surface::new(surface::CreateDesc {
    height: None,
    width: None,
});

The problem

If you have many different surfaces created (ex: maybe you webpage has multiple apps that use wasi-gfx on it), it's hard to differentiate which surface came from which source

This matters, for example, in the Javascript bindings for wasi-gfx which define surface creation as follows

constructor(desc) {
        this.canvas = document.createElement('canvas');
        this.canvas.style.width = '100svw';
        this.canvas.style.height = '100svh';
        this.canvas.tabIndex = 0;
        Promise.resolve().then(() => {
            const styles = getComputedStyle(this.canvas);
            this.canvas.width = parseInt(styles.getPropertyValue('width'));
            this.canvas.height = parseInt(styles.getPropertyValue('height'));
        });
        document.body.appendChild(this.canvas);
    }

As you can see, there is no id or class set on the HTML element, but it gets added to the page using document.body.appendChild(this.canvas);. That means that if multiple wasi-gfx programs are running, they may all be adding to document.body.appendChild(this.canvas); which no way for you to easily query the DOM to try and apply special properties to different ones

The solution A: add an id field

Instead of somehow making the JS bindings somehow be configurable as to where the Surface gets placed (probably too JS-specific), I think the easiest thing is to add an id field to create-desc

This way, a host that needs to hook in special behavior to Canvas elements that are created can just override the base Surface

import { Surface as BaseSurface } from './gfx.js';

/** override the base Surface to add custom logic you need on creation
export class Surface extends BaseSurface {
  constructor(desc) {
    super(desc);
    // add some custom logic that depends on desc.id
  }
}

The solution B: something app-specific

The other way I could tackle this is, from my Rust project, add a way to either get the canvas that was added or add a custom function to set the canvas ID from Rust

However, this approach only works if you have the ability to modify all wasi-gfx programs your site is using (which is not always the case)

[MendyBerger]

This seems like an issue with wasi-gfx-shim not with the spec.

According to the spec, we assume that the host is spawning the guests and knows which guest is requesting to create a surface. The guest is not in charge of where to put it's content. The host can decide based on which guest is calling it what canvas to use, and where to put it.

wasi-gfx-shim just creates a new one and appends it to the page, but a different implementation could have a hook for the host to choose based on some other semantics. But it's shouldn't be up to the guest.

(and since I'm the maintainer of wasi-gfx-shim, I'd be happy to explore ways to add this)

[SebastienGllmt]

This seems like an issue with wasi-gfx-shim not with the spec.

I created the issue here since I can't really imagine a good solution other than adding a new (possibly optional) field to create-desc in the spec

we assume that the host is spawning the guests and knows which guest is requesting to create a surface

While this can be true, if the guest is requesting the host to create multiple surfaces (ex: one for a background, one for a window), there is no way for the guest to provide hints about which is which (your only option is to duplicate guest logic in the host by saying the first surface Surface::new is for the background and the second Surface::new is for the foreground - but with complex enough logic duplicating your guest logic in the host does not scale)

The guest is not in charge of where to put it's content

We don't need the guest to be in charge of where to put its content. I think it's sufficient just for the guest to be able to provide a hint to the host about why it's requesting a surface, so the host can know what to do with that request