To avoid CORS errors, this page requires a local host server when run locally.
The large upper CanvasClass tests image, parent, id and clear methods. Clicking the CanvasClass toggles the appearance of the heart. It uses different CanvasClass image options depending on the button pressed and tells which button was pressed. When a click removes a heart image, the clear method is used to clear the CanvasClass and the image() method is used show the hearts.
The code shows the default parent and id and then the same items after they were changed.
The small CanvasClass tests the applyMatrix and resetMatrix. Normally the applyMatrix function moves the square but when the mouse is pressed over the canvas, the matrix is reset and the square moves to its assigned position. Note: In regular p5 canvases, reset() occurs at the beginning of every frame. This does not happen with CanvasClass. The obvious solution is put a reset() at the beginning of every draw function if applyMatrix is used.
The lower canvas tests the drop method
The p5.js file: domImage.pjs
James Brink, 6/27/2020