Placing a <Div> Within a <Canvas>

Placing a div within a canvas

You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element.

If you would like to position elements over the same area as a canvas, here is one technique (among many) that would let you do it:

HTML

<div id="canvas-wrap">
  <canvas width="800" height="600"></canvas>
  <div id="overlay"></div>
</div>

CSS

#canvas-wrap { position:relative } /* Make this a positioned parent */
#overlay     { position:absolute; top:20px; left:30px; }

Here's another technique, which lets the content of the div flow normally and makes the canvas a background to the content:

CSS

#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }

html5 div inside a context of canvas

Nothing goes inside the canvas tag except for elements that would be displayed if the browser doesn't support HTML5 and canvas. If you want to display regular HTML elements in a DIV, you could simply position it absolutely so that it floats above the canvas:

<canvas height="100" width="200" style="position:absolute;left:10;top:10"></canvas>

<div id="yourDiv" style="position:absolute;left:20;top:20">Your content</div>

Hopefully this helps.

How can I place a div over a canvas

Just give "div" and "canvas" same height and width. and canvas should be inside div.
like this-->

HTML/CSS

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

How to overlay a div over a canvas CSS

Try this:

#container {

  position: relative;

}

#container canvas, #overlay {

  position: absolute;

}

canvas {

  border: 1px solid black;

}

<div id="container">

  <canvas></canvas>

  <div id="overlay">This div is over the canvas</div>

</div>

How to put the div tags on canvas

canvas is an HTML element which can be used to draw graphics using scripting (usually JavaScript), so It's impossible to add an element inside canvas element, but you can play with css position to move the div inside canvas

<div class="container">
<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="myDiv"></div>
</div>

css:

.container{postion: relative;}
#myCanvas{background: red;}
#myDiv{height: 50px;width: 50px;background: blue;
position: absolute; top:10px;
}

see JSFIDLE

How to position div next to HTML5 canvas

<canvas> is just a normal block element, so you can position it however you will position a block element. You can apply float:left on the canvas & the button (please use a real <button>), you can display:inline-block them, you can add a wrapper around them and display: flex it, or even display: grid it or add position: relative to it and position: absolute to its children. There are lots of ways to achieve this. Here is a good starting point: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

Insert CANVAS within DIV

Just add overflow:auto to your div.

edit:
The div being the div in which you want to have scrollbars. In your case that would be #canvas-container.

Your div is not marked with overflow style, which means that the default is used. Default of overflow is visible, which means that the content of the container can be visible outside the parent's bounds.

How to align a canvas and a div element side by side

You can simply do this and it will work to an extent.

renderer.setSize(window.innerWidth * 0.6, window.innerHeight); // Set the width of the canvas initially to 60%;

But then you may have to update the canvasWidth when every time the window is resized. I have also created some new container via JS and appended the child elements into it.

// Canvas width dynamic resize
window.addEventListener("resize", () => {
   let ratio = 0.6
   let canvasWidth = window.innerWidth * ratio
   renderer.setSize(canvasWidth, window.innerHeight) // You can also manipulate this height by multiplying with the ratio
   camera.aspect = canvasWidth/ window.innerHeight
   camera.updateProjectionMatrix() // Must be called after any change of parameters.
});

// Add elements to the DOM in a wrapper container 
let ModelArea1 = document.querySelector("#ModelArea1")
let container = document.createElement("div")
container.classList.add("container")
document.body.append(container)
container.appendChild(renderer.domElement) // Append canvas to the container
container.appendChild(ModelArea1) // Append 40% area after canvas

This would give you a neater DOM generated:

<div class="container">
  
  <canvas id="scene1" width="726" height="541">
    </canvas>

  <div id="ModelArea1">
    
    <div id="Model1">
    </div>
    
    <div id="SelectionArea1">
      <button type="button" class="ButtonFormat" onclick="displayVariations()">Fabric Textures</button>
      <div class="FabricTectureOptions" style="display:none;">
        <div class="Fabric1">
        </div>
        <div class="Fabric2">
        </div>
      </div>
      <button type="button" class="ButtonFormat" onclick="displayVariations()">Leather Textures</button>
    </div>
    
  </div>
</div>

Finally you can turn the container to a flexbox element using display: flex

Output:

Codepen Demo: https://codepen.io/m4n0/pen/zYNeGVz

---

Related Topics