MyCanvas

MyCanvas is a p5.js class that has a HTML canvas that allows multiple canvases on the same web page. Several of the normal p5.js methods (as named in Properties, Methods, and Events listing and in the Testing and Syntax table) have been rewritten to operate in a MyCanvas.

At this point, when writing p5js methods for MyCanvas, very little attention has been paid validating parameters. No "z" parameters have been used. There has been no attempt to make these methods work in the webgl. Documentation is typically quite limited. What is available is on the test pages marked with an "x" in the Testing and Syntax table. Because, the MyCanvas methods are typically similar to those in p5js, one can find further information from the p5js references.

Some applications:

• simplisticExample.html: A simple example with two MyCanvas and only 13 lines of p5.js code.
• instanceMode.html A rewrite of the simplistic example using instance mode. It took me 22 lines of code.
• instanceMode2.html Another attempt at using instance mode. I was unable to get mouse events to work as desired.
• myCanvas2.html A rewrite of instanceMode2.html using myCanvas. The mouse events work as expected.
• ball.html: A rewrite of SonnySanberg demo with three bouncing ball using MyCanvases.
• Birthday.html: A fun application that shows a few of the things that can be done with a MyCanvas (and could be done with a regular p5js canvas.)
• TV.html: It has four different "TV" monitors with MyCanvas screens. Each of the screens is doing something different.
• Enlarge.html: Allows one to load a large image file into one MyCanvas and then look at a enlarge portion of it in a second MyCanvas.
• bezier.html: Demonstrates (and test) bezier curves in two different MyCanvases.

A table showing methods and properties implemented by p5js canvas and MyCanvas.

Download all the myCanvas files as a zip file

Simple example: The result is shown in the div with id = "example" on the right.

function setup() {
  canvas1 = createMyCanvas(100, 150);
  canvas1.background(210);
  canvas1.fill("red");
  canvas1.rect(20, 40, 60, 50);
  canvas1.text("A MyCanvas", 10, 130);

  canvas2 = createMyCanvas(150, 100);
  canvas2.background(200, 200, 255);
  canvas2.text("Another MyCanvas", 10, 90);
  canvas2.stroke("#008000");
  canvas2.line(20, 10, 130, 90);

  canvas1.parent("example");
  canvas2.parent("example");
}

When using MyCanvases, the most common error is to forgetting to prefix the method name, mouseX, and mouseY with the canvas name.

* not a standard p5.js property, method or event.

Testing and Syntax

Key: u - method is used.   x - primary example, test, syntax, and some documentation comments. The links are to .html files with that name.

* not a standard p5.js property or event.

The p5.js file: myCanvas.pjs

James Brink, 07/06/2020