Whenever I pile 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 piled 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
Whenever I pile 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 piled 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
Share Improve this question asked Apr 20, 2021 at 8:52 Imtiaz KabirImtiaz Kabir 1395 silver badges9 bronze badges 3- 1 why don't you find the default template file and edit that one? – Stack Exchange Broke The Law Commented Apr 20, 2021 at 9:18
- I looked inside that file and it seemed like a huge mess to me. Sure, I could slowly read what each of the tags are doing, but it just does not feel like the right way to solve my problem. I am looking for an easier way, or an already built template without the logo and all (which I didn't find anywhere) – Imtiaz Kabir Commented Apr 20, 2021 at 9:23
- 1 Perhaps shell_minimal.html is that one. github./emscripten-core/emscripten/blob/main/src/… – zakki Commented Apr 21, 2021 at 3:55
1 Answer
Reset to default 10Here 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>