# Dom and Image Test

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,7/4/2020