//  philExample
// James Brink, 7/23/2020
//  https://nerdparadise.com/programming/javascriptmouseposition
let canvas1, canvas2, backgroundColor1;  // CanvasClass
let mpX, mpY;
function setup() {
//  noCanvas();
  createCanvas(100, 100);  // make the hidden canvas visible
  background("yellow");

  canvas1 = createCanvasClass(180, 170);
  canvas1.fill(255, 0, 0);
  canvas1.mouseClicked(clicked);
  backgroundColor1 = "FloralWhite";
  canvas2 = createCanvasClass(150, 200);
  canvas2.stroke(255, 0, 255);
  globalMouse = canvas2;
}
function draw() {
  canvas1.background(backgroundColor1);
  canvas1.rect(canvas1.mouseX, canvas1.mouseY, 100 ,80);
  canvas2.background("Khaki");
  canvas2.stroke("blue");
  canvas2.line(canvas2.mouseX, canvas2.mouseY, 75, 100);
  canvas2.stroke("red");
  canvas2.line(mpX, mpY, 100, 125);
  
  canvas2.stroke("green");
  canvas2.line(gMouseX, gMouseY, 50, 75);
}
function clicked() {
  if (backgroundColor1 == "FloralWhite") {
    backgroundColor1 = "LightCyan";
  } else {
    backgroundColor1 = "FloralWhite";
  }
}

// these methods do not work for touches
function mouseMoved(event) {
  // called when the mouse is moved but no button is pressed
  print(" event.page: (" + event.pageX +"," + event.pageY + ")");
  mpX = event.pageX - canvas2.canvas.offsetLeft;
  mpY = event.pageY - canvas2.canvas.offsetTop;
}

function mouseDragged(event) {
  // called when the moused is moved and a button is pressed
  mpX = event.pageX - canvas2.canvas.offsetLeft;
  mpY = event.pageY - canvas2.canvas.offsetTop;
}