CODEWITHSUNDEEP
csshtmlcanvas
noreflow
noreflow

Reputation: 175

Overlayed canvas "steals" the context menu

I'm trying to draw an overlay canvas on top of non transparent HTML, but the canvas "steals" the context menu.

Is it somehow possible to ignore the context menu of the canvas?

Made a jsfiddle that show the problem: http://jsfiddle.net/75x8uwxf/1/

HTML:

<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
<canvas id="c" height="200" width="200" />

CSS:

#c { z-index: 1; position:absolute;top:0;left:0; outline: 2px dashed green; }

JS:

var c = document.getElementById("c").getContext("2d");
c.strokeStyle = "salmon";
c.beginPath();
c.lineWidth = 3;
c.moveTo(0, 160);
c.lineTo(150,160);
c.stroke();

If you right click inside the green dashed area (scenario A), you will see that the menu for the canvas is used. If you click outside the green dashed area (scenario B), you get the regular context.

I would like it to behave like scenaior B, even when you right click inside the dashed green area.

Is this possible somehow?

Upvotes: 0

Views: 55

Answers (1)

Turnip
Turnip

Reputation: 36742

Assuming that you don't need any user interaction with your canvas you could use pointer-events: none; on the canvas element:

var c = document.getElementById("c").getContext("2d");
c.strokeStyle = "salmon";
c.beginPath();
c.lineWidth = 3;
c.moveTo(0, 160);
c.lineTo(150,160);
c.stroke();
#c { z-index: 1; position:absolute;top:0;left:0; outline: 2px dashed green; }

canvas {
    pointer-events: none;
}
<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
<canvas id="c" height="200" width="200" />

Upvotes: 1

Related Questions