myCanvas Mode 2

This is a rewrite of instanceMode2.html illustrating that myCanvas doesn't have any problems with mouse event methods. It uses code in the style of https://p5js.org/reference/#/p5.Element/mousePressed so that events are recorded only when the mouse is over the canvas. The yellow canvas is defined in the normal manner. The off white canvas is a myCanvas. One difference between instantMode2 and myCanvas2 is that the myCanvas variables had to be given different names because all the variables are in the global name space.

// declarations for myCanvas
let myOver = false;
let myPressed = false;
let myCan;
// declarations for p5 canvas
let can;
let over = false;
let pressed = false;

function setup() {
  // code for myCanvas
  myCan = createMyCanvas(300, 170);
  myCan.mouseOver( () => {myOver = true;});
  myCan.mouseOut( () => {myOver = false;});
  myCan.mousePressed( () => {myPressed = true; });
  myCan.mouseReleased( () => {myPressed = false; });
  // code for p5 Canvas
  can = createCanvas(100, 100);
  can.mouseOver( () => {over = true});
  can.mouseOut( () => {over = false; });
  can.mousePressed( () => {pressed = true; });
  can.mouseReleased( () => {pressed = false; });
}

function draw () {
  // code for myCanvas
  myCan.background("FloralWhite");
  myCan.fill("black");
  myCan.text("over: " + myOver, 10, 30);
  myCan.text("pressed: " + myPressed, 10, 10);
  // code for p5 Canvas
  can.background("yellow");
  fill("black");
  text("over: " + over, 10, 30);
  text("pressed: " + pressed, 10, 10);
}

James Brink, 5/18/2020