# Equivalent to PGraphics g in p5.js?

**URL:** <https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463>\
**Category:** p5.js\
**Created:** [January 13, 2019, 1:46am UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463 "2019-01-13T01:46:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [January 13, 2019, 1:46am UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463/1 "2019-01-13T01:46:04Z")

</div>

Something I’ve done in Processing is create a function that has an optional PGraphics argument by utilizing the [g PGraphics in PApplet](https://github.com/processing/processing/blob/b9f4be62649beeb05151e29ebf9f9d3cfff046fc/core/src/processing/core/PApplet.java#L180). Like:

```auto
void showEllipse() {
  showEllipse(g); // when in PApplet
  // showEllipse(applet.g); // when different class
}

void showEllipse(PGraphics pg) {
  pg.beginDraw();
  pg.ellipse(100, 100, 50, 50);
  pg.endDraw();
}

```

I’d like to do something similar in p5.js but after digging through the source code for an hour or so I couldn’t find an equivalent to the g variable. Is there an equivalent in p5.js?

Here’s what I’d like to do:

```auto
function showEllipse(pg) {
  if (typeof pg === 'undefined') {
    pg = ;// this is the part I'm not sure about, something like p5.instance.g maybe
  }
  pg.ellipse(100, 100, 50, 50);
}

```

I can think of a few other less elegant ways ways to solve this problem but I was hoping someone is more familiar with p5.js and knows where to find the main p5.Graphics, if there is one.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2019, 2:11am UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463/2 "2019-01-13T02:11:21Z")

</div>

> [@hint(DISABLE\_DEPTH\_TEST) in P5](https://discourse.processing.org/t/hint-disable-depth-test-in-p5/5595/7):
>
> Shortest way to reach the sketch’s canvas rendering context is via undocumented variable drawingContext: gl = drawingContext; The canvas itself is under undocumented variable canvas. And its wrapper is under both undocumented variables \_renderer & \_curElement.

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [January 13, 2019, 3:32am UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463/3 "2019-01-13T03:32:01Z")

</div>

That helps, but it doesn’t really work the way I’d like because when using methods on a renderer you have to pass arguments as an array and it bypasses all the checks that p5 normally does. And it seems a fair amount extra work to find a way to convert the the args to an array only if the render is used. Here’s my progress on that if someone wants to go into it.

```auto
function showEllipse(pg) {
	if (typeof pg === 'undefined') {
		pg = _renderer;
	}
	pg.ellipse([100, 100, 100, 100]); // only works for when using _renderer and for some reason is using ellipseMode(CORNER);
	// pg.ellipse(100, 100, 100, 100); // only works for when not using _renderer
}

```

Will probably just do the following despite a little extra overhead I prefer that to code duplication or the headache of dealing with the renderer.

```auto
function showEllipse(pg) {
	let noGraphicsPassed = typeof pg === 'undefined';
	if (noGraphicsPassed) {
		pg = createGraphics(width, height);
	}
	pg.ellipse(100, 100, 100, 100);
	if (noGraphicsPassed) {
		image(pg, 0, 0);
		pg.remove();
	}
}

```

If anyone is interested they can see it in action in [this sketch](https://editor.p5js.org/figraham/sketches/rkFZeNdGN).

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2019, 3:57am UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463/4 "2019-01-13T03:57:14Z")

</div>

> [@figraham](#):
>
> … when using methods on a _\_renderer_ you have to pass arguments as an array and it bypasses all the checks that p5 normally does.

Unfortunately, **createCanvas()** instantiates a p5.Renderer object, while **createGraphics()** instantiates a p5.Graphics object, which is a wrapper for a p5.Renderer object, plus it acts as a p5 object too: 🤡

> [@Working with mouseDragged() and other mouse events inside a class](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/6):
>
> Each instance of p5 got a [\<canvas\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element ([HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)) attached to it. Just like a Processing Java Mode’s [PApplet](https://processing.org/reference/) got a canvas ([PGraphics](https://processing.org/reference/PGraphics.html)) as well. When we call [createCanvas()](https://p5js.org/reference/#/p5/createCanvas), it returns a [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object; which is a subclass of [p5.Element](https://p5js.org/reference/#/p5.Element) btW. Besides the main [\<canvas\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas), we can create additional offscreen canvases via [createGraphics()](https://p5js.org/reference/#/p5/createGraphics). However, it returns a hackish wrapper [p5.Graphics](https://p5js.org/reference/#/p5.Graphics) instead of an actual [p5.Renderer](https://p5js.org/reference/#/p5.Renderer)! A [p5.Graphics](https://p5js.org/reference/#/p5.Graphics) got all of the properties of a [p5](https://p5js.org/reference/#/p5) instance, besides…

It’s very inconsistent & hard to study how the p5js API deals w/ those 2 classes across its source code! 😵

There are other problematic patches to deal w/ p5.Image objects too.  
For some reason, the class p5.Image doesn’t inherit from p5.Element!  
And therefore, it’s not a parent class for neither p5.Renderer nor p5.Graphics! 😱

BtW, I’ve always ranted & been against this hackish p5.Graphics class from the very beginning of the p5js project. 🤬

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 13, 2019, 5:24pm UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463/5 "2019-01-13T17:24:55Z")

</div>

This seems to work:

```auto
function showEllipse(pg) {
	if(!pg){
		pg = this;
	}
	pg.ellipse(100, 100, 100, 100);
}

```

You could also use instance mode so you have a sketch variable that you can use directly.