AntoineLev AntoineLev - 3 months ago 9
CSS Question

Html Canvas Overlay that don't disable content under

I want to put the canvas defined by the red border over the div (black border) that is currently under it. It should have the same size as the div. I also want to be able to click on buttons and select text that is under the canvas.
I have been trying to do this for 2 days now and can't figure it out...

enter image description here

<canvas id="canvas">

</canvas>
<div class="jumbotron">
<div class="container-fluid" id="canvas-container">
</div>
</div>


current css (I know it's a mess, but I have been trying a lot of things)

html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}

.footer > .container {
padding-right: 15px;
padding-left: 15px;
}

code {
font-size: 80%;
}

.jumbotron
{
text-align: center;
}
#canvas-container
{
padding: 0;
//position: absolute;
border: 1px solid black;
}
.jumbotron
{
padding: 0;
#position: absolute;
}

canvas {
border: 1px solid red;
}

Answer

You need to specify:

canvas {
  pointer-events:none;
}

Here is a js fiddle where you can test clicking on the area where the black box is under the red box:

https://jsfiddle.net/1n1bp7m9/1/