I have a C++ application with a UI that I converted to JS using emcc.
The UI of this application takes the form of a canvas on the web page and is appended to the body. How can I control where the canvas is appended?
What if I want the canvas to be appended to #my-container instead of the body?
Cheers!
From default output html file, you will got this code with building command with -o arg (for example):
emcc source.c ... -o myapp/index.html
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }
div.emscripten_border { border: 1px solid black; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
Also interest point:
<div class="emscripten_border">
<canvas class="emscripten"
id="canvas"
oncontextmenu="event.preventDefault()"
tabindex=-1 >
</canvas>
</div>
I inspect canvas container relations, there is no any problems there. You can manipulate with canvas vs container in any directions.
Dont worry emscripten use id="canvas" arg no miss.
Be carefully when you giving width and height to your canvas elem.
It is a different effect on graphics in next example ->
<canvas style="width:100%"></canvas>
<canvas width="100%"></canvas>
It is little complicated to use c,c++ in that proporse. If you really want then better for begin take a look reference link => https://github.com/mbasso/asm-dom
Example :
One way :
<button onclick="_callFunction()">
// callback for button event
extern "C"
{
void callFunction() { std::cout << "callFunction called \n"; }
}
// Other way
emscripten_run_script("document.getElementById('canvas').width =
'320'");
// compile
emcc -s EXPORTED_FUNCTIONS="['_callFunction']"
Test with debugger next link:
