0
  • My goal: Get a event only rectangle in Canvas
  • I used if for filtering location of rectangle but if is not working well. even I did not click pipe. I could see a log about pipe.

enter image description here

eventListener

canvas.addEventListener("click", e => {
          let rect = canvas.getBoundingClientRect();
          this.mousePos = {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
          };
          console.log(this.mousePos.x, this.mousePos.y);
  
if(0 <= this.mousePos.x <300 && 100 <= this.mousePos.y <110) {
  console.log("mouseClicked");
}

https://codepen.io/chikichaka/pen/NWRjWyG

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Jaeseo Lee
  • 172
  • 10
  • `0 <= this.mousePos.x <300` doesn't check if `x` is between zero and 300. – VLAZ Dec 16 '20 at 08:18
  • JS does not work that way. You may mean `if(this.mousePos.x >=0 && this.mousePos.x <= <300 && this.mousePos.y >= 100 && this.mousePos.y <110)` - x – mplungjan Dec 16 '20 at 08:20
  • 3
    In almost all programming languages the expression `2 < 1 < 3` is interpreted as `(2 < 1) < 3`. In some languages like C/C++ and javascript this then results in `(false) < 3` and by type coercion becomes `(0) < 3` and 0 is less than 3 so `2 < 1 < 3` is true even if `2 < 1` is false – slebetman Dec 16 '20 at 08:20

0 Answers0