# createGraphics referencing existing canvas context

**URL:** <https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067>\
**Category:** Coding Questions\
**Created:** [May 19, 2020, 8:02pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067 "2020-05-19T20:02:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vheun](https://avatars.discourse-cdn.com/v4/letter/v/51bf81/32.png) [@vheun](https://discourse.processing.org/u/vheun)\
**Post date:** [May 19, 2020, 8:02pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067/1 "2020-05-19T20:02:04Z")

</div>

Is there an easy way to bind an existing html canvas to the Graphics object you create with createGraphics()?

Example: I have an existing painted 2D canvas that I would like to draw via image() into my existing WEBGL canvas. I just can’t find a method how I can do that other than redrawing everything within p5js. Since createGraphics generates a canvas element. There must be an easy way to just change the reference.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 19, 2020, 8:45pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067/2 "2020-05-19T20:45:31Z")

</div>

I don’t know if there’s a fancy way of doing it, but you could always fall back on the underlying HTML5 Canvas API. One approach:

```javascript
// Select the existing canvas (underlying HTML element via `elt`).
const existingCanvas = select('#existingCanvas').elt;

// Use native API to draw existing canvas to the p5.js canvas.
drawingContext.drawImage(existingCanvas, 0, 0);

```

From [the reference](https://p5js.org/reference/#/p5/drawingContext):

> The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable `drawingContext`[.]

---

<div class="post-metadata">

**Author:** ![vheun](https://avatars.discourse-cdn.com/v4/letter/v/51bf81/32.png) [@vheun](https://discourse.processing.org/u/vheun)\
**Post date:** [May 19, 2020, 9:19pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067/3 "2020-05-19T21:19:04Z")

</div>

I found a very simple elegant solution. I made the following changes:

A canvas element is handed over via the function call and the new Graphics instance.

```auto
 _main.default.prototype.createGraphics = function(w, h, renderer, canvas) {
            _main.default._validateParameters('createGraphics', arguments);
            return new _main.default.Graphics(w, h, renderer, this, canvas);
          };

```

and the Graphics constructor uses that canvas element to replace the creation of a new element.

```auto
_main.default.Graphics = function(w, h, renderer, pInst, canvas) {
            var r = renderer || constants.P2D;

            if(canvas){
                this.canvas = canvas;
            }else {
                this.canvas = document.createElement('canvas'); 
            }
           
            var node = pInst._userNode || document.body;
                if(!canvas)
            node.appendChild(this.canvas);

```

As a result, you can use an existing canvas element as an image buffer.  
This change does not affect the usual behavior.

I created a pull request:

> <https://github.com/processing/p5.js/pull/4563>

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [May 20, 2020, 2:05pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067/4 "2020-05-20T14:05:02Z")

</div>

What a coincidence. I was just day or two ago wondering would this be possible. You saved me a trouble of asking.

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [June 8, 2022, 2:24pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067/5 "2022-06-08T14:24:33Z")

</div>

Ahh this is soo good and helpful! needed to render p5 to an existing canvas for a project and this is the only solution that’s worked…! would be great if it could make it into the main source – once I share example of usage, i’ll (re)open an issue about how/why it’s needed.