# 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:** 1\
**Showing post:** 4

<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. 🤬

---

_[View the full topic](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463)._