supporting existing canvas elements for createGraphics

src/core/p5.Graphics.js

@@ -21,13 +21,21 @@ import * as constants from './constants';
  * @param {Number} h            height
  * @param {Constant} renderer   the renderer to use, either P2D or WEBGL
  * @param {p5} [pInst]          pointer to p5 instance
+ * @param {Object} canvas       existing html canvas element
  */
-p5.Graphics = function(w, h, renderer, pInst) {
+p5.Graphics = function(w, h, renderer, pInst, canvas) {
   const r = renderer || constants.P2D;
 
-  this.canvas = document.createElement('canvas');
+  if(canvas){
+    this.canvas = canvas;
+  }else {
+    this.canvas = document.createElement('canvas');
+  }
+
   const node = pInst._userNode || document.body;
-  node.appendChild(this.canvas);
+  if(!canvas) {
+    node.appendChild(this.canvas);
+  }
 
   p5.Element.call(this, this.canvas, pInst);
 

src/core/rendering.js

@@ -199,6 +199,7 @@ p5.prototype.noCanvas = function() {
  * @param  {Number} h height of the offscreen graphics buffer
  * @param  {Constant} [renderer] either P2D or WEBGL
  *                               undefined defaults to p2d
+ @param  {Object} canvas existing html canvas element
  * @return {p5.Graphics} offscreen graphics buffer
  * @example
  * <div>
@@ -224,9 +225,9 @@ p5.prototype.noCanvas = function() {
  * 4 grey squares alternating light and dark grey. White quarter circle mid-left.
  *
  */
-p5.prototype.createGraphics = function(w, h, renderer) {
+p5.prototype.createGraphics = function(w, h, renderer, canvas) {
   p5._validateParameters('createGraphics', arguments);
-  return new p5.Graphics(w, h, renderer, this);
+  return new p5.Graphics(w, h, renderer, this, canvas);
 };
 
 /**