P5.js: new feature : mouse event outside canvas should (optionnaly) be ignored

Created on 27 May 2016 · 3Comments · Source: processing/p5.js

I'm planning to implement some game exemple for my pupils with p5js. I've found a strange issue. mouse events (clicks) outside the canvas are taken into account.

I understand it can be usefull. On the contrary, it can be disturbing.

Planning a small game where you can click on a figure to win, clicking on a button or a menu outside the canvas brings up a fail in the game (unintended)

An optionnal parameter ( canvasClickMode() function ?) should be used.

Source

swirly

Most helpful comment

In p5.js, the entire browser window is considered your sketch, so a click anywhere in it triggers mousePressed() and other mouse listeners. If you'd like to only listen to the canvas, you can do something like:

function setup() {
  var c = createCanvas(100, 100);
  c.mousePressed(doStuff);
}

function doStuff() {
  console.log('clicked on canvas');
}

http://p5js.org/reference/#p5.Element/mousePressed

lmccart on 30 May 2016

👍11

All 3 comments

function setup() {
  var c = createCanvas(100, 100);
  c.mousePressed(doStuff);
}

function doStuff() {
  console.log('clicked on canvas');
}

http://p5js.org/reference/#p5.Element/mousePressed

lmccart on 30 May 2016

👍11

I know that issue #1437 is already closed and long overdue but what worked for me was enclosing the event inside an if statement such that it would only run if (mouseX <= width && mouseX >= 0 && mouseY <= height && mouseY >= 0), that is, within the boundaries of the canvas.