Currently scale(), translate(), and rotate() are not automatically reset every time a new frame is drawn.
Transformations apply to everything that after the transformation was put in effect. As a result a transformation must be undone if one wants to restore the standard configuration. There are 3 options. One is to reverse the transformation. For example, scaling by 2 would have to be followed by a scaling of 1/2 to undue it. The stationary examples use this technique.
The other two options are resetMatrix and push() and pop(). The in-motion examples use these techniques. The puple rectangle code was surrounded by push() and pop() in order that the light green ellipses would could be translated from the original origin. The only difference in the coding between the normal p5 canvas and CanvasClass was the in-motion part of the code for the CanvasClass was preceded by a resetMatrix().
p5.js file: transform.pjs
James Brink, 6/27/2020