Html Question posted in
Some basic documentation can be found here.

The layering of my HTML items is messed up

I’m making a app in flask and I’m trying to have a canvas take up the full available width of my screen, then put my menu items on a different layer so that there still accessible. (I’m using bootstrap btw)

The only time the layering actually achieves what I want is when I set the z-index of the canvas to -1, but then I can’t interact with it. I’ve also tried changing the items to be positioned relatively but then they are still interfering with each other.

This is the HTML produced

document.addEventListener("DOMContentLoaded", function() {
  const canvas = document.getElementById('mainCanvas');
  const ctx = canvas.getContext('2d');

  let isPainting = false;
  let lineWidth = 5;

  function canvasResize() {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth
  }

  canvas.addEventListener('mousedown', (e) => {
    isPainting = true;
    ctx.lineWidth = 1;
  });

  canvas.addEventListener('mouseup', () => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
  });

  canvas.addEventListener('mousemove', (e) => {
    if (!isPainting) {
      return

    }
    ctx.lineCap = 'round';
    ctx.strokeStyle = "black";
    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop)
  });
  window.addEventListener("resize", canvasResize())
})
.collapse-horizontal.show {
  display: flex !important;
}

.collapse-horizontal.show>.container-fluid {
  flex: 1;
  overflow: auto;
}

.menuItems {
  position: absolute;
  z-index: 100;
}

#menuContent {
  background-color: white;
}

canvas {
  background-color: rgb(134, 180, 47);
  position: absolute;
  z-index: 1;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<main class="text-center mt-3 d-flex justify-content-center align-items-center px-0" style="height: 100%; overflow-y: hidden">



  <div class="menuItems" style="height: 100vh;" id="menuContent">
    <div class="collapse collapse-horizontal menuItems" id="menu">
      <div class="container-fluid menuItems" style="width: 350px;">
        Content that takes up 100% of the available height
      </div>
    </div>
  </div>

  <div class="menuItems container-fluid d-flex justify-content-start align-items-start" style="height: 100vh">
    <button class="btn btn-secondary mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-expanded="false" aria-controls="collapseExample">
            <i class="bi bi-sliders" style="font-size: 2rem"></i>
        </button>
  </div>
  <canvas id="mainCanvas" height="1008" width="1434"></canvas>
</main>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I couldn't interact with the canvas because the way I was moving the button to the top left made it so that its bounding boxes took up the entire screen, instead of just its margin. I changed it to <span class="menuItems me-auto mb-auto ms-3"> <button class="btn btn-secondary mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-expanded="false" aria-controls="collapseExample"> <i class="bi bi-sliders" style="font-size: 2rem"></i> </button> </span>


  2. 0

    You can display your buttons in the same container as your canvas, on top of the canvas via larger z-index values:

    const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rect(0, 0, 1500, 1000);
ctx.fillStyle = "red";
ctx.fill();
    #myCanvas {
    width: 1500px;
    height: 1000px;
}

.canvas-container{
  position: relative;
  width: 500px;
  height: 500px;
}
#myCanvas {
  position: absolute;
  background-color:lightgrey
}
input {
  position:absolute;
  z-index: 30;
}
    <div class="canvas-container">
    <input type="button" value="foo" onclick="alert('foo')" style="left: 0; top: 0;">
    <input type="button" value="bar" onclick="alert('bar')" style="left: 40px; top: 0;">
    <canvas id="myCanvas" onclick="alert('canvas')"></canvas>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search