2

I was reading this answer but the approach proposed is purely theoretical. In my HTML5 code I've tried something like this:

<div id='gameCanvas'>
    <div id="insideText">First trial</div>
</div>

and in the CSS I've put this:

#insideText{
    background-color: transparent;
}

I'm quite a newbie when it comes to HTML/CSS, so I'm probably making some easy mistake, but this way I get a black line above my canvas, and the text appears in that black line. I want the text to appear over the canvas without this black line, and I would also like to know how to place some text on different areas of the canvas (my canvas is not fullscreen).

Edit: If I put the <div> outside the canvas element it appears with a transparent background indeed, but always as a separate element from the canvas.

gman
  • 100,619
  • 31
  • 269
  • 393
Eärendil Baggins
  • 552
  • 1
  • 8
  • 23
  • whats exactly your requirement is? you have canvas on your page, and you want one div on top of these canvas, covering all the canvas area? so user directly can you click/interact with canvas. right? – Deepak Sharma Aug 29 '18 at 03:13
  • I need the divs to be drawn in the canvas area in order to display a basic UI. I also want them to have a transparent background so that the 3D scene is visible behind them. – Eärendil Baggins Aug 29 '18 at 03:16

1 Answers1

5

Your question isn't specific to three or canvas. It's just a basic HTML/CSS question which I'm sure is answered 1000 times on this site but since search sucks I'll answer again and leave it to someone with more patience to close as a dupe

To make 2 or more elements overlap you generally need a parent element. That element has to have css position: relative; or position:absolute;. That makes it the anchor/origin/base for its children. Note: <body> is already marked this way.

Then for all the children you can use position:absolute and set their positions with left, top, right, or bottom

Example

const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'yellow';
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = 'red';
ctx.arc(150, 75, 125, 0, Math.PI * 2, true);
ctx.fill();
<h1>Some text</h1>

<div style="position: relative; display: inline-block;">
  <canvas></canvas>
  <div style="position: absolute; left: 1em; top: 1em;">foo</div>
  <div style="position: absolute; right: 1em; bottom: 1em;">bar</div>
</div>

note: the display: inline-block; is to make the outer element fit the content rather than stretch to width of its parent (the body in this case). There are 100s of other ways to set the size of elements.

note that elements are transparent by default so no need to set the background color as transparent unless you set it somewhere else as non-transparent

const renderer = new THREE.WebGLRenderer();
document.querySelector('#gameCanvas').appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.add(
 new THREE.Mesh(
   new THREE.SphereGeometry(1), 
   new THREE.MeshBasicMaterial({color:'red'})
 )
);
scene.background = new THREE.Color('yellow');
const camera = new THREE.PerspectiveCamera(45, 2, .1, 10);
camera.position.z = 2;
renderer.render(scene, camera);
#gameCanvas {
  position: relative;
}
#insideText {
  position: absolute;
  left: 20px;
  top: 20px;
}
<h1>some text</h1>
<div id='gameCanvas'>
    <div id="insideText">First trial</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
gman
  • 100,619
  • 31
  • 269
  • 393