From 0c3a8630655b16b4f74630705f6d4ab2426e827d Mon Sep 17 00:00:00 2001
From: valentinptc <vheun@ptc.com>
Date: Tue, 19 May 2020 17:17:13 -0400
Subject: [PATCH] supporting existing canvas elements for createGraphics

These changes extend the createGraphics function with the ability to pass an existing canvas. As such you can use existing canvas elements for graphics processing.
---
 src/core/p5.Graphics.js | 14 +++++++++++---
 src/core/rendering.js   |  5 +++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js
index 0a8a4c8aef..f3f17cb52c 100644
--- a/src/core/p5.Graphics.js
+++ b/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);
 
diff --git a/src/core/rendering.js b/src/core/rendering.js
index dfb0d440e9..5877f15ed5 100644
--- a/src/core/rendering.js
+++ b/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);
 };
 
 /**