reset() for p5.Graphics (#3662)

* p5.Graphics.endFrame

* p5.Graphics.reset()

Author: stalgiag

src/core/p5.Graphics.js

@@ -62,6 +62,58 @@ p5.Graphics = function(w, h, renderer, pInst) {
 
 p5.Graphics.prototype = Object.create(p5.Element.prototype);
 
+/**
+ * Resets certain values such as those modified by functions in the Transform category
+ * and in the Lights category that are not automatically reset
+ * with graphics buffer objects. Calling this in <a href='#/p5/draw'>draw()</a> will copy the behavior
+ * of the standard canvas.
+ *
+ * @method reset
+ * @example
+ *
+ * <div><code>
+ * let pg;
+ * function setup() {
+ *   createCanvas(100, 100);
+ *   background(0);
+ *   pg = createGraphics(50, 100);
+ *   pg.fill(0);
+ *   frameRate(5);
+ * }
+ * function draw() {
+ *   image(pg, width / 2, 0);
+ *   pg.background(255);
+ *   // p5.Graphics object behave a bit differently in some cases
+ *   // The normal canvas on the left resets the translate
+ *   // with every loop through draw()
+ *   // the graphics object on the right doesn't automatically reset
+ *   // so translate() is additive and it moves down the screen
+ *   rect(0, 0, width / 2, 5);
+ *   pg.rect(0, 0, width / 2, 5);
+ *   translate(0, 5, 0);
+ *   pg.translate(0, 5, 0);
+ * }
+ * function mouseClicked() {
+ *   // if you click you will see that
+ *   // reset() resets the translate back to the initial state
+ *   // of the Graphics object
+ *   pg.reset();
+ * }
+ * </code></div>
+ *
+ * @alt
+ * A white line on a black background stays still on the top-left half.
+ * A black line animates from top to bottom on a white background on the right half.
+ * When clicked, the black line starts back over at the top.
+ *
+ */
+p5.Graphics.prototype.reset = function() {
+  this._renderer.resetMatrix();
+  if (this._renderer.isP3D) {
+    this._renderer._update();
+  }
+};
+
 /**
  * Removes a Graphics object from the page and frees any resources
  * associated with it.