Set: width and height of canvas in html and Edit: resource paths of resource.rs using "origin.endswith"

[kimgh06]

Set: width and height of canvas in html

When using html, a canvas overflowed web browser's display.
To prevent, setting css of a canvas.

And I would like that a canvas matchs browser's display.

canvas {
    background-color: black;
}

to

canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    width: 100svw;
    height: 100svh;
}

Edit: resource paths of resource.rs using "origin.endswith"

When using localhost with server, it occured "Not Found" error.

Because it tried to get "localhost:{port}/learn-wgpu/{resource file}".
According to path of a directory, the url should be "localhost:{port}/res/{resource file}"

 if !origin.ends_with("learn-wgpu") {
        origin = format!("{}/learn-wgpu", origin);
}

to

 if !origin.ends_with("res") {
        origin = format!("{}/res", origin);
}

---

I hope this tutorial would be greater for beginners like me.

Regards.
From kimgh06.

[sotrh]

The reason I have it this way is due to a quirk with Vuepress. I've been unable to support referencing static assets at a path other than the root. Changing that would break the website.

[kimgh06]

I apologize that.

I thought that the codes are divided to 2 versions.
The one for website.
Other one for running code.

Because of my misunderstanding, I didn't consider that this code are running with Vuepress.
I thought that the code was made using "python -m http.server" for beginners, therefore they can load resources using static path when they access localhost.

How about making two versions?
one for website, other one for running code.

[sotrh]

How about making two versions? one for website, other one for running code.

If you want you can create a feature flag to build with the learn-wgpu origin. You'll have to modify my wasm-builder to include that flag at build time.