CODEWITHSUNDEEP
javascripthtmlcsscanvashtml5-canvas
kvn
kvn

Reputation: 2300

Canvas restricting mouse to interact with overlapping elements (z-index higher than canvas)

I have a canvas in the exact position of another div. I placed these one over the other intentionally.

I have to interact with the div to give input (input via mouse gesture) but the canvas which is right in the same place is not allowing me to give me input.

I can't place the canvas anywhere else because my output is the combination of response from canvas as well as the static elements in the div together.

This is my index.html

<div class="maincontainer">
    <h2 id="heading" class="heading">Please set your password</h2>
<div id="patterncontainer" class="patterncontainer">
</div>
<canvas id="canvas" class="canvas"></canvas>
</div>

style.css

.patterncontainer {
    margin-left: 32.5px;
    position: absolute;
    width: 225px;
    height: 225px;
    background: #66C285;
    padding: 7.5px;
    border-radius: 10px;
    z-index: 1;
}

.canvas {
    margin-left: 32.5px;
    position: absolute;
    left: 0px;
    width: 225px;
    height: 225px;
    padding: 7.5px;
    border-radius: 2px;
    /*margin: 22.5px;*/
    /*background-color: #FFF;*/
    /*background-color: rgba(114, 160, 204, 1);*/
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    /*-webkit-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
    -moz-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
    box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);*/
    /*display: none;*/
    z-index: -1;
}

This is a part of my js file

var canvas = document.getElementById("canvas");
// canvas.style.display = inline;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
ctx.fillStyle="#FF0000";

How can I interact with patterncontainer div while still having canvas in the same place?

Please do comment if any further information is necessary.

Upvotes: 0

Views: 263

Answers (1)

markE
markE

Reputation: 105035

Tell the canvas not to listen for events so the events fall through to the div.

CSS:

canvas{pointer-events:none;}

Upvotes: 1

Related Questions