HTML5 and WebAssembly

In this chapter, we will show you how the C code we write to target WebAssembly comes together with HTML5, JavaScript, and CSS to create a web page. We will teach you how to create a new HTML shell file to be used by Emscripten in the creation of our WebAssembly app. We will discuss the Module object and how Emscripten uses it as an interface between our JavaScript and the WebAssembly module. We will show you how to call WebAssembly functions written in C from within JavaScript on our HTML page. We will also show you how to call JavaScript functions from our C code. We will discuss how to use CSS to improve the look of our web page. We will introduce you to the HTML5 Canvas element and show how it is possible to display images to the canvas from within JavaScript. We will briefly discuss moving those images around the canvas from our WebAssembly module. This chapter will give you an understanding of how everything works together and lays the foundation for other features we are developing for our WebAssembly applications.

In this chapter, we will cover the following topics:

• The Emscripten minimal shell file
• Creating a new HTML shell and C file
• Defining our CSS
• HTML5 and game development
• Adding a canvas to the Emscripten template