Как разместить div над холстом

Question

Обратите внимание, что я пробовал другие методы. Как получить холст, чтобы стать «фоном» для div? HTML:

<div style="z-index: 1; position: relative;"> 
    <div id="fireworks"><canvas id="canvas"></canvas></div> 
</div> 
<div class="page" style="z-index: 50000; height: 100%;"> 
    <form id="signup-form"> 
    <input style="display:none"> 
    <input type="password" style="display:none"> 
... 

Answer 1

Просто дайте "DIV" и "холст" одинаковую высоту и ширину. и холст должен быть внутри div. как это ->

HTML/CSS

<div style="width: 500px; height: 400px"> 
    <canvas style="width: 100%; height:100%"></canvas> 
</div> 

Answer 2

набор маржа 'холст', и г-индекс для 'DIV' так DIV появляются прямо над холстом.

<div style="width: 500px; height: 400px; z-index: 10; background-color:transparent"></div> 
<canvas style="margin-top: -400px; width: 500px; height: 400px;"></canvas> 

Answer 3

Или вы всегда можете просто установить холст в качестве фонового изображения с

var whatEverSize = 100; 
var canvas = document.createElement("canvas"); 
canvas.width = whatEverSize; 
canvas.height = whatEverSize; 
// set the canvas as the element background of the image type jpeg and medium 
// compression 
document.getElementById("myDiv").style.background = "url(" + canvas.toDataURL("image/jpeg", 0.5) + ")"; 

Таким образом вы можете плитка, масштаб, клип с помощью CSS.

Только проблема в том, что это не практично, если вы делаете много рендеринга на холст.