I tried using WebAssembly Stadio (2018/4/17 version)

What is WebAssembly Studio?

WebAssembly's online development environment (https://webassembly.studio/) provided by Mozilla released on April 11, 2018. See other sites for WebAssembly.

I will write something in C for the time being.

To use C language, click "Empty C Project" to write and execute the code.

Array cannot be passed

Even if I try to draw an image, the array transfer does not work. It seems that only numeric types can be passed between WebAssembly and JavaScript. You can pass pointers, but it doesn't seem to work. When I read the explanations of other sites, it says what about linear memory, but there are few sites that explain it properly.

In short, there is a memory shared by WebAssembly and JavaScript, and data is placed there and exchanged.

However, many C functions don't work properly in plain WebAssembly. Functions that use system calls such as printf and malloc don't seem to work properly.

When I try to google with WebAssembly malloc, it comes out that I link a huge library, but it is not such a development environment and it is troublesome, so I will seek another method.

I want to use malloc easily with WebAssembly

The project of "Hello World in C" is diverted.

In this template, the system call mMap2 required when using malloc is implemented in JavaScript. It is easy to use it as it is, and the size is small.

You can hand over the structure, but it seems to be troublesome to look inside (I will write it when I know how to hand over the type of structure)

Then, once you implement such code on WebAssembly side, you can do whatever you want. (WASM_EXPORT is a macro that is automatically defined in WebAssembly Studio. You can't call it from JavaScript unless you put it before the function.)

#include<stdlib.h>

WASM_EXPORT
void * wballoc (int bytes) {
  void * p=malloc(bytes);
  return p;
}

WASM_EXPORT
void wbfree(void *pointer) {
  free(pointer);
}

Call it from the JavaScript side as follows.

 var size =10000;
 var p = instance.exports.wballoc(size);
/*
 (The following is omitted)
*/
 instance.exports.wbfree(p);

But it doesn't work well

The current version (β as of April 17, 2018) of WebAssembly Studio checks for WebAssembly errors, but is unaware of JavaScript errors. If it doesn't work, there are many errors in JavaScript, so it seems faster to look at the debugger of the browser. You can also see the behavior of WebAssembly in the FireFox debugger.

Rather than replacing JavaScript with WebAssembly, it seems that there are many uses in the mechanism for implementing a high-speed library for JavaScript.