Event Test

The following example similar to ones in most of the event descriptions in the p5.js references. They show that the p5js mouseClicked can be used in two ways.
1. To handle mouse click events anywhere on the page.
2. To specify an event handling function that works only on the canvas.
CanvasClass event handlers work the second way. But as this example shows, one can still use the first method and just have the event apply to the CanvasClass.

let can;
let d;
let g;

function setup() {
  can = createCanvasClass(100, 100);
  can.parent("Example");
   // Attach listener for clicks on the canvas only.
   // The CanvasClass way of handling events.
  can.mouseClicked(changeGray);
  d = 10;
  g = 100;
}

function draw() {
  can.background(g);
  can.ellipse(width / 2, height / 2, d, d);
}

    // This function fires after the mouse has been
    // clicked anywhere.  No CanvasClass equivalent.
function mouseClicked() {
  d = d + 10
}

    // This function fires after the mouse has been clicked 
    // on the canvas.  The CanvasClass way to handle events.
function changeGray() {
 g = random(0, 255);
}

Events