# What is the difference between createGraphics() and createDiv()

**URL:** <https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484>\
**Category:** Beginners\
**Created:** [April 19, 2021, 5:13am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484 "2021-04-19T05:13:35Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 19, 2021, 5:13am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/1 "2021-04-19T05:13:35Z")

</div>

the code as following

```javascript
let pg, div;

function setup() {
  createCanvas(400,400);
  pg = createGraphics(400,400);
  div = createDiv();
}

function draw() {
  pg.rect(50,50,50,50);
  pg.fill("red");
  pg.noStroke();
  image(pg, 0, 0); // it works, the rect appears

  div.size(400,400);
  div.position(0, 0);
  div.style("background","yellow"); // it works, the div appears

  div.rect(40,40,40,40); // Error: div.rect is not a function

```

I am very confused about the instances `pg` and `div`, what is the difference between them. In my opinion, the `pg` just like the Layer in Photoshop, we can draw something on it, and if we have a serval of `pg`s, they are in order, but it seems that the `pg` has to be rendered every time we draw somthing on it, in other words, if we have called `image(pg, 0, 0)` (the only way to render the `pg`?), the pg can’t update automatically even though we draw on it again unless we call `image(pg, 0, 0)` again manually. So it is impossible or difficult for me to ceate dynamic design with `pg`. And for `div`, how can we draw something on it, or it is just like `pg`?

Looking forward you guys reply, thanks so much 😉!

PS: Why not give us learners the complete properties and methods for each Object, the [Reference] ([reference | p5.js](https://p5js.org/reference/)) is just something scattered, not systematic.

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [April 19, 2021, 7:32am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/2 "2021-04-19T07:32:49Z")

</div>

Hi,  
you understood quite well what does `createGraphics` : it is a layer on which you can draw additional stuff on it. It actually creates one more canvas uppon the original one.  
Why would be difficult to have dynamic design with it ? You only need to call the function `image()` at the end of your modifications as you said, in the `draw` or elsewhere. (You just need to call it once by frame)

`createDiv` manipulates the DOM (= the HTML of the page), so it does not affect your p5 canvas. If you want to use it as a drawing space, you’ll have to create another canvas in this div.

You can check the complete properties of p5 objects, search `p5.[object]` on the reference page. In your case : [reference | p5.js](https://p5js.org/reference/#/p5.Element)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 19, 2021, 7:41am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/3 "2021-04-19T07:41:06Z")

</div>

Hi! Just to add a bit more background - they may share similar ideas in terms of “containing” graphics but `p5.Graphics` and `div` are completely different things. `p5.Graphics` is so-called off-screen buffer and only exists in the memory. As you pointed out, it only shows up when you use `image()` [1], and it won’t updated - imagine `p5.Graphics` like a stamp.

On the other hand, `div` is rather a “concrete” element on an HTML page. As the name is from division, `div` is used for dividing a page for layout, and it can contain text, images, canvases (including p5 canvas), videos and so on (you can attach them with [`parent`](https://p5js.org/reference/#/p5.Element/parent) function). You can effectively “draw” with `div` using css properties like `border` and `background-color` like you did, but it has nothing to do with p5.js functions, because this is happening outside the canvas, and p5.js is only “helping” the browser draw a `div`. If you are interested in HTML and CSS, take a look at “developer tool” on your browser so you can how HTML pages are rendered.

And finally, thank you for the suggestion on the website! Can you elaborate a bit more - do you mean there should be categories for each classes like `p5.Graphics` and `p5.Element` ? Or is it confusing that CSS styles are not included in the reference? I can open an “issue” on github as feedback. But note that maintainers are mostly volunteers and it’s not their full-time job, so please be nice to them 🙂

[1] which is not true in webgl mode as you can pass it as a texture to a shader.

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 19, 2021, 8:30am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/4 "2021-04-19T08:30:46Z")

</div>

Thanks so much.  
After checking carefully, I find that I put the `pg.background(200)` in the function `draw()`, that is the reason why I can’t save my previous drawing in the canvas, instead we should put it in the function `setup()`.

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 19, 2021, 10:01am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/5 "2021-04-19T10:01:04Z")

</div>

Thanks very much for your thoughtful reply 😉.  
As you have said, `p5.Graphics` is based on `p5.js`, and `div` is the same `div` in Javascript(previously I thought the `div` is wrapped in p5.js, that is what making me confused), `div` and `canvas` are both elements in Javascript. Maybe I have understood.

By the way, I am very grateful to the creators and maintainers of p5.js, becuase p5.js is so wonderful that can make all the people join in programming and design, and it is based on web, so crazy!!! However, I think the document could be friendly more for newbies if we can add the logic behind p5.js, for example, the `p5.Graphics` is based on the same thought as the Layer in Photoshop, but the [reference | p5.js](https://p5js.org/reference/) doesn’t tell it at all. In my opinion, the description " add one layer on canvas to draw something on it just like Layer in Photoshop" is better than “thin wrapper around a renderer, to be used for creating a graphics buffer object”, the former is what we can imagine easily, but the latter is so abstract. I think the current [reference | p5.js](https://p5js.org/reference/) is not the perfect material for us learners to learn p5.js, as I said before, it is scattered, it should be used for reference(just like the name) rather than systematic learning, learning should be based on logic rather than scattered skills. Maybe you think that the [reference | p5.js](https://p5js.org/reference/#/p5.Element) is user-friendly enough, but please keep in mind, the p5.js learners are mostly newbies in programming, so it is better to write document from their perspective, analogy is a good way.

PS：I will be so sorry if there is any offence in language, but it is not out from my heart, just because of the difference in language(English is not my native language).

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 19, 2021, 10:09am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/6 "2021-04-19T10:09:00Z")

</div>

thanks for the comments! I appreciate it and I will forward to the contributors 🙂 One point is that while the reference should be beginner friendly enough, it is not an exhaustive material for learning. For example, you already know Photoshop but not everyone does, and having a clear language for explaining a function/class is very tricky in a single page of document. That should be complemented by tutorials and examples.

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 19, 2021, 10:16am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/7 "2021-04-19T10:16:22Z")

</div>

> [@micuat](#):
>
> and having a clear language for explaining a function/class is very tricky in a single page of document

Yes, I am so agree with you, that is the meaning of Reference. My point is that maybe we can add one tutorial which tells the logic bebind p5.js for learners 😀.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 19, 2021, 10:18am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/8 "2021-04-19T10:18:02Z")

</div>

thanks again! I posted an issue, and if you have any comments feel free to continue on github (I recommend to post feedback there instead of this forum because most of the contributors are not active on this forum)

> <https://github.com/processing/p5.js-website/issues/1008>
>
> Not sure where to post this but I hope it is fine to share feedback here, which I found on Processing...

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 19, 2021, 11:09am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/9 "2021-04-19T11:09:55Z")

</div>

Thanks so much to post an issue. I will follow it 😉.

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 20, 2021, 10:32am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/10 "2021-04-20T10:32:54Z")

</div>

I have post it on github issues, but no one replys yet, so I post it here for the answer as soon as possible.

> Yes, we have to acknowledge that the [reference | p5.js](https://p5js.org/reference/) is user-friendly enough for most of the functions, such as `line()`, `push()`, `pop()`, `clear()`, but at least for `p5.Element`, it is not clear enough.

For example

```javascript
let cv, pg, div;

function setup() {
  // canvas, graphics buffers and the HTML elements are included in p5.Element
  cv = createCanvas(400, 400);
  pg = createGraphics(300, 300);
  div = createDiv(); // confusion(1): why can't set width and height like createDiv(200, 200), the other two can do it

  // confusion(2): there are at least 3 ways to set background( or other properties) for canvas, but not the same for graphics buffers and the HTML elements.
  cv.background("red"); // it works
  cv.elt.style.background("red"); // it works
  cv.style("background", "red"); // it works

  pg.background("yellow"); // it works
  pg.elt.style.background("yellow"); // it can't work
  pg.style("background", "red"); // it can't work

  div.background("blue"); // it can't work
  div.elt.style.background("blue"); // it can't work
  div.style("background", "blue"); // it works
  div.background("yellow"); // it can't work 

  div.size(200, 200);
  div.position(0, 0);
  image(pg, 0, 0);
}

```

the [reference | p5.js](https://p5js.org/reference/) describes the p5.Element as “Base class for all elements added to a sketch, including canvas, graphics buffers, and other HTML elements. It is not called directly, but p5.Element objects are created by calling createCanvas, createGraphics, createDiv, createImg, createInput, etc.” So why some methods can be used for `createCanvas()`, but not the same case in other objects, their performance is not consistent. If they inherit from other different classes, not just the base class p5.Element, maybe the reference should point out.

That is the reason why I suggest to add one tutorial to explain the logic behind the p5.js, at least one chapter for p5.Element.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 20, 2021, 11:39am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/11 "2021-04-20T11:39:03Z")

</div>

> [@turtle](#):
>
> `cv.elt.style.background("red"); // it works`

it works but it’s not “painting” the canvas. It’s setting the CSS property instead.

The confusion is coming from the fact that you are mixing up two components - canvas and HTML. They share some similar attributes and names but they have completely different concepts. Canvas is a feature of HTML, where you can use functions to draw on, like literally a canvas. p5.js makes it easier to draw (with simple functions like line and ellipse), and everything will result on the canvas. p5.Graphics is part of the canvas (let’s say it’s a spare canvas) and it only lives in the canvas.

On the other hand HTML is a markup “language”, how you code a webpage. You can use layouts like div, lists, tables, anchors, images and so on. When this information is retrieved, the browser renders the result to make a visual representation of the HTML. And HTML comes with CSS to style - to add borders, background colors and so on. They have their own language and rules, which have nothing to do with canvas (in fact they have, because canvas is part of HTML). What makes it confusing is that HTML is not always static. You can use JavaScript to add divs, images after the page is loaded. This makes web powerful to create interactive pages. p5.js has helper functions to do this - like adding divs and change it’s color.

The challenge is that p5.js makes it easier to access HTML, but still you need to learn the language of HTML and CSS to make use of it. This is beyond the scope of the “core” of p5.js, and I would say that this should be clearly stated in the reference. You used background attribute of CSS to change color, but there are bunch of other attributes like border, shadow, animations and so on, which are completely irrelevant of what you draw on the canvas.

An analogy can be (I don’t know if it is good though) that HTML is a park and canvas is a sandbox. You can play with sand in the sandbox but you cannot apply to how you play with a swing or a slide. But the sandbox actually exists in a park.

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 20, 2021, 11:55am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/12 "2021-04-20T11:55:11Z")

</div>

Thanks for your reply.

However, I think you have misunderstood my meaning.

My point is that the `p5.Element` is the base class for canvas, graphics buffers and other HTML elements, just like the description in [reference | p5.Element](https://p5js.org/reference/#/p5.Element), it means that they should have the same properties and methods( in deed they are not), unless they also inherit from other classes individually( but the reference don’t tell it at all). That is what confused me.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 20, 2021, 12:55pm UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/13 "2021-04-20T12:55:05Z")

</div>

I see. In that case you may be confused with inheritance. p5.Element is the base class. It offers functions like parent, id, style. Canvas (p5.Renderer) inherits p5.Element. Thus a canvas has access to what p5.Element offers. Moreover, a canvas has extra functions specific to canvas (e.g., background, line, etc). It doesn’t mean that p5.Element has access to background or line.

And for example, p5.MediaElement is another class that inherits p5.Element. It also has access to parent, id, etc. that is offered by p5.Element. However, it does not have background or line, because it doesn’t inherit p5.Renderer.

---

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 21, 2021, 12:15am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/14 "2021-04-21T00:15:41Z")

</div>

Ok, thanks for your reply continuously, and all your answers help me a lot. Now I have realized that maybe the problem is from me, I don’t have a thorough understanding of some concepts in programming, so next step I will learn by reading books and online tutorials, instead of asking question nonsensly.

Also thanks other people for helping me 😀

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 21, 2021, 9:54am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/15 "2021-04-21T09:54:30Z")

</div>

no problem and we are all here to learn 🙂 if you have further questions feel free to post on the forum!

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [April 22, 2021, 11:55am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484/16 "2021-04-22T11:55:47Z")

</div>

> [@turtle](#):
>
> … instead of asking question nonsensly.
> 
> Also thanks other people for helping me 😀

We are happy to help. There is no need to be uncomfortable about asking questions. It is an important part of the learning process. 😄