How to get rid of emscripten logo and console while only having a canvas?

Viewed 1189

Whenever I compile my C code with emcc main.c -o index.html emscripten generates an html file with their logo and some buttons and the console. But I don't want those. I only want the canvas where I can show my SDL rendered stuff.

I did a little bit of research and found this question in stack overflow. Apparently you have to enter emcc --shell-file and give it some template html as an argument.

So I made a template html file like so

<html>
   <head>
      <title>Some title</title>
   </head>
   <body>
   </body>
</html>

But when I ran emcc main.c -o index.html --shell-file template.html it gave an error. Apparently emscripten looks for some think like - {{{ SCRIPT }}}.

So I added {{{ SCRIPT }}} inside my body. It compiled fine. But when I ran my index.html in localhost:3000 I got an error in the console which said cannot find addEventListener of undefined.

[N.B. I am running an SDL program. The one mentioned in their docs

What should I do? Thanks in advance

1 Answers

Here is a minimal example that you can use as your index.html, assuming your canvas code is in index.js:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

    <!-- Create the canvas that the C++ code will draw into -->
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

    <!-- Allow the C++ to access the canvas element --> 
    <script type='text/javascript'>
        var Module = {
            canvas: (function() { return document.getElementById('canvas'); })()
        };
    </script>
    
    <!-- Add the javascript glue code (index.js) as generated by Emscripten -->
    <script src="index.js"></script>
    
</body>

</html>
Related