The first build we created with Emscripten used a default HTML shell file. If you have a website, this is probably not the way you would prefer your web page to look. You would probably prefer to design your look and feel using CSS and HTML5 specific to your design or business needs. For instance, the templates I use for my websites typically include advertisements to the left and right of the game's canvas. That is how traffic to these sites is monetized. You may choose to add a logo for your website above your game's canvas. There is also a text area where Emscripten logs output from printf or other standard IO calls. You may choose to remove this textarea element altogether, or you may keep it, but keep it hidden because it is useful for debugging later.

To build the HTML file based on a new shell file that is not the default Emscripten...

In this section, we are going to create a new shell.c file that exposes several functions called from our JavaScript. We will also use EM_ASM to call the InitWrappers function that we will define inside the new HTML shell file that we will be creating. This function will create wrappers inside JavaScript that can call functions defined in the WebAssembly module. Before creating the new HTML shell file, we need to create the C code that will be called by the JavaScript wrappers inside the HTML shell:

1. Create the new shell.c file as follows:

#include <emscripten.h>
#include <stdlib.h>
#include <stdio.h>

int main() {
    printf("Hello World\n");
    EM_ASM( InitWrappers() );
    printf("Initialization Complete\n");
}

void test() {
    printf("button test\n");
}

void int_test( int num ) {
    printf("int...

Now that we have some basic HTML, we need to create a new shell.css file. Without any CSS styling, our page looks pretty terrible.

A page without styling will be similar to the one shown as follows:

Luckily for us, a little bit of CSS goes a long way to make our web page look presentable. Here is what the new shell.css file we are creating looks like:

body {
    margin-top: 20px;
}

.input_box {
    width: 20%;
    display: inline-block;
}
.em_button {
    width: 45%;
    height: 40px;
    background-color: orangered;
    color: white;
    border: 2px solid white;
    font-size: 20px;
    border-radius: 8px;
    transition-duration: 0.5s;
}

.em_button:hover {
    background-color: orange;
    color: white;
    border: 2px solid white;
}

.em_input {
    width: 45%;
    height: 20px;
    font-size: 20px;
    background-color: darkslategray...

Most HTML rendering is done through the HTML Document Object Model (DOM). The DOM is what is known as a retained mode graphical library. Retained mode graphics retain a tree known as a scene graph. This scene graph keeps track of all the graphical elements in our model and how to render them. The nice thing about retained mode graphics is that they are straightforward for a developer to manage. The graphical library does all the heavy lifting and keeps track of our objects for us as well as where they render. The downside is that a retained mode system takes up a lot more memory and provides a lot less control to the developer. When we write HTML5 games, we could take images rendered in the DOM using <IMG> HTML elements and move those elements around using JavaScript or CSS animations to manipulate the positions of those images within the DOM directly...

In an earlier part of this chapter, we discussed making calls to the Emscripten WebAssembly app from a shell template. Now that you know how to make the interaction work between JavaScript and WebAssembly, we can add a canvas element back into the template and start to manipulate that canvas using the WebAssembly module. We are going to create a new .c file that will call a JavaScript function passing it an x and y coordinate. The JavaScript function will manipulate a spaceship image, moving it around the canvas. We will also create a brand new shell file called canvas_shell.html.

As we did for the previous version of our shell, we will start by breaking this file down into four sections to discuss it at a high level. We will then discuss the essential parts of this file a piece at a time.

1. The beginning of the HTML file starts with...

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...