覆蓋畫布「竊取」上下文菜單

Question

我試圖在非透明HTML上繪製覆蓋畫布，但畫布「竊取」了上下文菜單。

是否有可能忽略畫布的上下文菜單？

發了的jsfiddle，顯示問題：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(); 

如果你右擊內綠色的虛線區域（場景A），您會看到使用了畫布的菜單。如果您單擊綠色虛線區域外（場景B），則會獲得常規上下文。

即使您在虛線的綠色區域內單擊鼠標右鍵，我也希望它的行爲與場景B類似。

這是可能以某種方式？

Answer 1

假設你不需要你canvas你可以在canvas元素上使用pointer-events: none;任何用戶交互：

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" />