Summary

In this chapter, we discussed the Emscripten minimal shell HTML file, what its various components are, and how they work. We also wrote about what parts of the file we can do without, if we are not using our shell to generate canvas code. You learned about the Module object, and how it is the interface that uses the JavaScript glue code to tie the JavaScript in our HTML and our WebAssembly together. We then created a new WebAssembly module that contained functions we exported to allow JavaScript to use Module.cwrap to create JavaScript functions we could then call from our DOM that executes our WebAssembly functions.

We created a brand new HTML shell file that used some of the Module code from the Emscripten minimal shell, but rewrote the HTML and CSS of the original shell almost entirely. We were then able to compile that new C code and HTML shell file into a working WebAssembly app that was able to call WebAssembly functions from JavaScript, as well as call JavaScript functions from WebAssembly.

We discussed the benefits of using the HTML5 canvas element, and the differences between immediate and retained mode graphics. We also explained why it makes sense for games and other graphics-intensive tasks to use immediate mode instead of retained mode.

We then created a shell file to make use of the HTML5 canvas element. We added JavaScript code to draw an image to the canvas and wrote C code that used WebAssembly to modify the position of that image on the canvas every frame creating the appearance of a moving spaceship on the HTML5 canvas.

In the next chapter, we will introduce you to WebGL, what it is, and how it improves graphics rendering on the web.