0

I created a canvas on top of a webpage. The canvas is transparent with some objects. Under the canvas there are some buttons that don't belong to the createjs stage.

I would like to make that button working, at the moment since the canvas area is over the buttons (canvas transparent) I can't click the buttons.

Is there a way to disable mouse handling or make it possible to pass the event to the object that are under the createjs canvas? Please see the image the circle grey button is unclickable because the canvas is over the button (even if is transparent). I can't resize the canvas.

enter image description here

Kerby82
  • 4,934
  • 14
  • 48
  • 74
  • Have you tried changing the z-index of the canvas element to negative? – Iulia Mihet Nov 23 '16 at 18:17
  • How can I change the z-index of the canvas? I know how to do it with children. Anyway in that case does the canvas will be coverd by the underlying object? – Kerby82 Nov 23 '16 at 18:22
  • Maybe this will guide you: http://stackoverflow.com/questions/9165766/html5-canvas-set-z-index – Iulia Mihet Nov 23 '16 at 18:27
  • does not work. I was looking for some property that disable the interception of the mouseevents but I could not find in the documentation. – Kerby82 Nov 23 '16 at 18:47

1 Answers1

0

Have you looked into CSS Pointer Events? http://caniuse.com/#feat=pointer-events

It is not well-supported by IE (pre-11), and it will prevent any internal interaction on Canvas itself, but if you don't have interactive elements on Canvas, it could work for you.

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • does not work. It makes any click disabled on the underlying object as well. – Kerby82 Nov 23 '16 at 21:25
  • I saw the demo. But using createjs over the canvas makes your solution not working. – Kerby82 Nov 23 '16 at 23:48
  • Added EaselJS stage and a shape. The shape can't receive click events because of the `pointer-events`. http://jsfiddle.net/lannymcnie/qent2q7p/2/ – Lanny Nov 24 '16 at 16:14