0

I have a map with buttons that I can click on but want to add a graphic layer over top. The problem is (even though everything I'm reading says it shouldn't do this), when clicking on any part of the topLayer png that has pixels, it doesn't let me click on the buttons underneath. I basically want to make the topLayer not clickable, I've tried every variation of pointerEvents with all kinds of names....the only thing I've been able to manipulate with the drawImage is the globalAlpha.

How in the world do I prevent this from covering up my clicks?

this.addTopLayer = function(){
    // load topLayer.png and display it

    var TopLayer = new Image();
    TopLayer.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.drawImage(TopLayer, 0, 0);

        };
    TopLayer.src = projpath+'/'+spath+'/'+topLayerFilename+'.png';

    }
PrimeOfKnights
  • 426
  • 5
  • 17
Alanasaurus
  • 3
  • 1
  • You said you tried pointer events, but just in case, this might be relevant https://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – katniss.everbean Aug 17 '17 at 21:00
  • You will need to provide more information (probably an example.) What do you mean exactly by "*when clicking on any part of the topLayer png that has pixels, it doesn't let me click on the buttons underneath*"? Are you using some kind of library? – Derek 朕會功夫 Aug 17 '17 at 21:01
  • It's a large png that is a bunch of labels that covers the whole map, I layered that over top of the map. So the blank spaces of the png don't interfere, just when I click on a label...I want the whole png to be click-through basically – Alanasaurus Aug 17 '17 at 21:06

0 Answers0