What are the differences between these two?

The first example can pass the context from JS to Rust:

import init, { make_smiley } from '../pkg/tem.js';
async function run() {
    await init(); 
    make_smiley(ctx);
}
run();

But the second:

// IMPORT THE GENERATED JS MODULE
import init from "../pkg/tem.js";

// GET WASM, RUST TRANSFORMATION
const runWasm = async () => {

	const rustWasm = await init("../pkg/tem_bg.wasm"); // THE FILE
    rustWasm.make_smiley(ctx);

};
runWasm();

Gives the following error:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'strokeStyle')
at imports.wbg.__wbg_setstrokeStyle_0ab7348da47291bb (tem.js:278:37)
at tem_bg.wasm:0x2c31
at tem_bg.wasm:0x3fd6
at runWasm (main.js:158:14)

(I'm drawing on the given context in Rust with strokes, JS.)

How do these two behave differently?

This looks like you're trying to import a wasm module, but you're just passing the path to the wasm module into a function from another wasm module. Did you mean to use import?

1 Like

Tbh I'm not sure. I copied this from somewhere. They both work, I can call Rust functions with arguments from JS just fine, except not with context (and probably other things) apparently.
I can use the first method, but am curious what goes specifically wrong, or why it being wrong already, shows with context as an argument (if that's even the actual problem).

What does the init function look like?

This is literally all I got for it to work. The init itself is the same in the first as the second.
The only other thing I use to create the js and wasm file from Rust is run wasm-pack build --target web.

This might be too much, but with the second method it's easy to create a memory buffer (to exchange values easier in memory) like so: rustWasm.memory.buffer, haven't figured out how to do that with the first..

Oh the init is generated my bad

What happens when you don't pass the string argument to init in the second version?

Everything seems to work except for the same issue. So unsure what it does at all now that you mention it.

Trying a lot but when I print ctx out it's always just undefined in Rust.

Where is ctx defined in JS?

Top of file:

const CANVAS = document.querySelector("#canvas");
const CTX = document.querySelector("#canvas").getContext("2d");

Try console.log on ctx before you call make_smiley in JS

Yea that's fine. It works with the first method as well.

When I: console::log_2(&"in make smile".into(), &ctx.into()); (in Rust) it says ctx is moved, so IDK, but maybe it has something to do with that? I recall you saying something similar with canvas. But, regardless, it prints undefined.. So..

I'm sure (hope) I'll get it at some point. It's either this way, and get passing ctx etc to work, or get the first method to work with creating wasm memory buffers.. :expressionless:
Maybe I shouldn't use wasm-pack build --target web, since most examples use bundlers. But I never used bundlers as well, and don't think I need them anyway.

Ahh, I suspect you are calling the wasm export directly in the second version rather than the generated one from wasm_bindgen that sets everything up for the call. You should be able to use make_smiley from the first version and still access the memory on the rustWasm instance from the second version

1 Like

I literally just figured that myself haha.. Took a while. Thanks again man! Helping me a lot. Gonna play around with your answers from the other thread and this!

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.