Как контролировать расположение холста в документе?

Question

У меня есть приложение C++ с пользовательским интерфейсом, который я преобразовал в JS с помощью emcc.

Пользовательский интерфейс этого приложения принимает форму холста на веб-странице и добавляется к тексту. Как я могу контролировать, куда добавляется холст?

Что, если я хочу, чтобы холст был добавлен к #my-container вместо тела?

Ура!

Answer 1

Из выходного html файла по умолчанию вы получите этот код с помощью команды построения с -o arg (например):

 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; }

Также интересная точка:

<div class="emscripten_border">
 <canvas class="emscripten"
         id="canvas"
         oncontextmenu="event.preventDefault()"
         tabindex=-1 >
 </canvas>
</div>

Проверяю отношения холста-контейнера, никаких проблем нет. Вы можете манипулировать холстом против контейнера в любых направлениях.

Не волнуйтесь, emscripten используйте id="canvas" arg no miss.

Будьте осторожны, задавая ширину и высоту элемента холста.

В следующем примере это другой эффект на графике ->

<canvas style="width:100%"></canvas> 

<canvas width="100%"></canvas> 

Тест с отладчиком по следующей ссылке:

something.html