To avoid CORS errors, this page requires a local host server when run locally.
The large upper MyCanvas tests image, parent, id and clear methods. Clicking the MyCanvas toggles the appearance of the heart. It uses different MyCanvas 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 MyCanvas 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 MyCanvas test 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.
The lower canvas tests the browse method which creates a browse input file button. Many browsers allow dropping files onto the button. Browse files are processed exactly the same way the drop event does. "Browse options" allows testing 5 different functions that can be applied to the dropped files and images.
MyCanvas' images are actually object HTMLCanvasObjects
but p5's images are unique to p5.js. However p5's images actually
contain the object HTMLCanvasObject as the .canvas property.
This means that if img is a p5 image created with the p5js
loadImage method (which cannot be processed
by MyCanvas' image() method, it can be easily converted using
img = img.canvas;
or using a special conversion function
img = cvs.convertImageToMyCanvas(img);
where cvs is a MyCanvas.
The flower image is done with MyCanvas' loadImage which unfortunately requires loading with a local server and can't be processed in preload. The sleigh image was loaded during preload with the default p5 loadImage and then was converted to MyCanvas image using convertImageToMyCanvas.
Why does MyCanvas use a different image format? Frankly, it is because I couldn't figure out how to get MyCanvas' image method to produce a p5 image. Probably, it is easier than I thought. I might change this someday. But MyCanvas images have an advantage. One can put the image on a web page (normally hidden) and then use it in a sketch avoiding the preload and CORS error problems.
| createMyCanvas(w, h) | Creates a
MyCanvas element and sets the dimensions of it in pixels. To be useful,
it must be assigned to a variable, e.g. canvas = createMyCanvas(200, 100); While many different MyCanvas can be created, each needs to be assigned to an unique variable. Assigning two different MyCanvases to the same variable may cause problems. |
| parent(parent) parent() | If the function has an argument, then it becomes the parent of the MyCanvas. This allows positioning of the canvas. In any case it returns the parent of the MyCanvas. |
| id(id) id() | If the function has an argument, it becomes the id. In any case it returns the current id of the MyCanvas. Note: every MyCanvas is assigned an id of the form "myCanvasn" where n is a sequence number. Hence the large canvas' original id was "myCanvas1". The small canvas' id is "myCanvas2". |
| clear() | Clears the pixels within a buffer. This function clears everything to make all of the pixels 100% transparent. |
| convertImageToMyCanvas(img) | Converts a p5 image to a MyCanvas image by just returning img.canvas. |
| loadImage(path, [successCallback], [errorCallback]) | Loads the image identified by path into an image variable. The path to the image should be relative to the HTML file that links in your sketch. Notes: This method returns a MyCanvas image that can be used with the MyCanvas image method. This method cannot be used in preload() because the MyCanvas cannot be created until setup(). Unfortunately like the p5.js loadImage, it causes a CORS error if the application is run locally without the help of a local server |
| image(img, x, y) image(img, x, y, width, height) image(img, x, y,width, height, sx, sy) image(img, sx, sy, sWidth, sHeight, x, y, width, height) |
Places the image on the canvas at (x, y). If you have trouble getting
an image loaded, try the following. In the body of the html file, include <div style = "display: none"> <img src = "filename" alt = "info" id = "identifier"></div> (To make sure the image is loaded properly, temporarily change "none" to "block".) Then in setup function, use the following: img = document.getElementById("identifier"); canvasName.image(img, ...); See https://p5js.org/reference/#/p5/image for details but there may be confusion about the order of the parameters. The loading the image is asycronous but may be quite quick if the web page loads the image before the script begins. To get the heart image to reappear: Left button: Uses the 5 argument version. Middle button: Uses the 9 argument version. Right button: Uses the 3 argument version. |
| browse(fileEvent, [concludingEvent]) | Adds a browse button to the canvas' parent. The user can then browse for files. Many browsers also allow dragging and dropping files on the button. When files are selected, they are treated in exactly the same way as the drop event treats them. The entire description of the drop event applies. This includes the fileEvent and concludingEvent handlers, and the file parameter of the fileEvent handler. The functions that can be used to process the file argument in the fileEvent include hide, infoThumb([style]), thumb([style]), click(clickProcessor), and parent(div). |
| applyMatrix(a, b, c, d, e, f) | Sets a matrix that transforms
the coordinates. See https://p5js.org/reference/#/p5/applyMatrix for more information and examples. |
| resetMatrix() | Replaces the current matrix with the
identity matrix. Used by the clear method. See https://p5js.org/reference/#/p5/resetMatrix for more information and an example. |
The p5.js file: domImage.pjs
James Brink, 5/13/2020