index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
            overflow: hidden
        }

        body,
        canvas {
            margin: 0;
            padding: 0;
        }
    </style>
    <title>WASM Sofrware renderer</title>
</head>

<body>
    <canvas class="emscripten" id="canvas"></canvas>
    <script type='text/javascript'>
        var Module = {
            'wasmBinaryFile': 'index.wasm',
            // Needed because of emscripten_set_main_loop_arg
            'noExitRuntime': true,
            'canvas': (function () {
                let canvas = document.getElementById('canvas');
                canvas.addEventListener('webglcontextlost', function (e) {
                    alert('WebGL context lost. You will need to reload the page.');
                    e.preventDefault();
                }, false);
                return canvas;
            })(),
            'print': function (msg) {
                console.log(msg);
            },
            'printErr': function (msg) {
                console.error(msg);
            },
            'preRun': [function () {
                window.onresize = document.onload = () => {
                    let canvas = document.getElementById('canvas');
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    canvas.style.width = window.innerWidth + 'px';
                    canvas.style.height = window.innerHeight + 'px';
                    Module.ccall('CCanvas_browserWasResized', 'number', [], []);
                }

                const fileDropped = async function (event) {
                    event.preventDefault();
                    event.stopPropagation();

                    let fileToLoad = event.dataTransfer.files[0];
                    let contents = await fileToLoad.text();
                    let name = fileToLoad.name;
                    FS.writeFile(name, contents);
                    contents = FS.readFile(name, { encoding: 'utf8' });

                    Module.ccall('CCanvas_dropEventForSDL', 'number', ['string'], [name]);
                }

                document.body.addEventListener('dragover', (e) => { e.preventDefault(); });
                document.body.addEventListener('drop', fileDropped);
            }]
        }
    </script>
    {{{ SCRIPT }}}
</body>

</html>