Event Test

These events occur only when the mouse is over the MyCanvas. ( mouseOut, keyUp and dragLeave occur when the mouse leaves the MyCanvas. However, mouseX and mouseY track the mouse wherever it is.

Unfortunately, once an event is established, it cannot be deleated and should not be changed.

This example is taken from the p5.js file. This example, similar to ones in most of the event discription in the p5.js file shows that 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.
MyCanvas event handlers work the second way (because I can't figure out a reasonable way to allow something similar to the first - although restricted to the MyCanvas).

let cnv;
let d;
let g;

function setup() {
  cnv = createCanvas(100, 100);
  cnv.mouseClicked(changeGray); // attach listener for
  // activity on canvas only.  The MyCanvas way of handling events
  d = 10;
  g = 100;
}

function draw() {
  background(g);
  ellipse(width / 2, height / 2, d, d);
}
// this function fires after the mouse has been
// clicked anywhere.  No MyCanvas equivalent.
function mouseClicked() {
  d = d + 10
}

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

mouseX	The x value of the mouse's position relative the left side of the MyCanvas.
mouseY	The y value of the mouse's position relative to the top of the MyCanvas.
isOver *	True when the mouse is over the MyCanvas. Otherwise it is false.
mouseIsPressed	True when any mouse button is pressed and the mouse is over the MyCanvas. Otherwise it is false.
keyIsPressed	True when a key is pressed and the mouse is over the MyCanvas. Otherwise it is false.
key	The key currently being pressed. Otherwise, the empty string
mousePressed(event)	Callback function event is called when the mouse button is pressed. Use system variable mouseButton to determine which button was pressed last
mouseReleased(event)	Callback function event is called when the mouse button is released over the canvas.
mouseClicked(event)	Callback function event is called after the mouse button was pressed and released over the MyCanvas. The order of events: mousePressed, mouseReleased, mouseClicked.
doubleClicked(event)	Callback function event is called when there is a double click over the MyCanvas.
mouseWheel(event)	Callback function event is called every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad and the mouse is over the MyCanvas. The position of the blue square is adjusted with the mouse wheel. Unfortunately, the event also moves the canvas if that is possible. (But that seems true for the p5 canvas as well.)
mouseMoved(event)	Callback function event is called when the mouse is moved over the MyCanvas.
mouseOver(event)	Callback function event is called when the mouse enters the MyCanvas.
mouseOut(event)	Callback function event is called when the mouse exits the MyCanvas.
keyDown(event) *	Callback function event is called when once when a key is pressed and the mouse is over the MyCanvas. The value (including some non-ASCII keys) is placed in the key variable. Some strange things may when more than key is pressed. Standard control function may occur when control key combinations are pressed.
keyUp(event) *	The call back function is called even if the mouse is not over or has not been over the canvas.
dragOver(event)	Callback function event is called when a file is dragged over the MyCanvas.
dragLeave(event)	Callback function event is called when the dragged file exits the MyCanvas.
drop(fileEvent, [concludingEvent])	fileEvent is called once for every file dropped. After all the files are processed, concludingEvent is called to signal file loading has finished. Example: function setup(); can = createMyCanvas(400, 300); can.drop(processFile, finished); ... function processFile(file) { if (fileType == "image") { // some file info and a full sized image is displayed below the canvas can.image(file.data, 0, 0); // display image in canvas upper left corner can.hide(); // hide the file info and image } else if (fileType == "text" \|\| fileType == "application" ) { // Some file info is displayed below the canvas. // Note: only Javascript applications are read. console.log(file.data); } } function finished() { print("All files are loaded"); } Actually, "file" is an object - not a file. It has the following properties: name (of the file but typically not the complete path) size type (e.g. image, text, application, ... if it was reported by the browser) subtype (e.g. jpg, gif, HTML, javascript) idNum (The span id is composed as `"S" + idNum` while the image has the id `"I" + idNum`. Its primary use is for the various functions like thumb and hide.) data (Image: an HTMLImageElement, text and javascript: the text, otherwise null.) The file info and image (if it is an image file) is put in a span element whose id is `"S" + idNum`. By default, the span is placed below the MyCanvas. If the file is an image, it is processed as an HTML image inside the span. It's id is `"I" + idNum`. I created this object before realizing it quite similar to the p5.js image file. Several functions can be applied to the file or its image: hide(): hides the file info including the image. Very similar to the p5js hide. thumb([style]): This applies only to images. It is a MyCanvas extra. Assuming the image's height is large enough (> 60px high), style is applied to make the default image a thumbnail. The default style is `"height: 60px; padding: 3px;"`. Unlike, infoThumb(), it hides the file info. infoThumb([style]): This applies only to images. It is a MyCanvas extra. Like thumb() but does not hide the file info. click(clickProcessor): This applies only to images. It is a MyCanvas extra. Makes the image clickable. The callback function `clickProcessor` is called to process the click. The following is a very simple clickProcessor: function clicked(event) { if (event.target == "[object HTMLImageElement]") { clickImg = event.target; // assumes that draw() will display the image } parent(div): This applies only to images. It is a MyCanvas extra. `parent` is made to be the parent of the span holding the image. For example, the division might act as a "tray" for thumbnails. Caution: Modern digital cameras and phone take large pictures that can easily exceed our monitors. For example. my wife's camera takes pictures that are 3072 x 4096 and often are up to 5 mb in size. My digital camera takes 4896 x 3672 pictures and which are often nearly 9 mb in size. But my desktop monitor is only 1920 x 1080 and my wife's lap top is set to 1280 x 720. Full size pictures will typically overwhelm your monitor. Suggestions: Reduce the size of pictures. Use the hide or thumb options. Use the 5, 7, or 9 parameter options for image(). And don't load a large number of pictures into your apt. Doing so could be a significant drag on your browser. See also, browse which adds a browse button but works in the same manner.

eventTest