# How to add a canvas to a \<div\> and center it?

**URL:** <https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107>\
**Category:** Coding Questions\
**Created:** [June 23, 2020, 5:27pm UTC](https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107 "2020-06-23T17:27:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [June 23, 2020, 5:27pm UTC](https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107/1 "2020-06-23T17:27:36Z")

</div>

I’m not sure if div is the best thing to use but here goes.

I have 2 different types of canvases. Type 1 will be centered horizontally. Type 2 will be centered horizontally and vertically. I have 2 different snippets of code to make this happen listed below (someone else wrote this).

Sequence of my sketch:

1. canvas1 displayed (type1; centered horizontally)
2. canvas1 removed; canvas2 displayed (type2; centered vertically and horizontally)
3. canvas2 removed; canvas3 displayed (type1; centered horizontally)

What changes do I make to my style.css to make this happen? Or maybe I should ask more generally, how do I make what I want to happen, happen?

Thanks!

Type1:

```auto
canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

```

Type2:

```auto
canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

```

(Apparently the solution has something to do with this:

> ```auto
> var myCanvas = createCanvas(winWidth, winHeight);
> myCanvas.parent("idnameofdiv");
> 
> ```
> 
> Make sure you have to function in a script tag in the html as well. Note you do not add # in the .parent().  
> )

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 25, 2020, 5:55pm UTC](https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107/2 "2020-06-25T17:55:38Z")

</div>

I think you should use buffers rather than making a whole two different canvases.

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 25, 2020, 5:57pm UTC](https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107/3 "2020-06-25T17:57:02Z")

</div>

Make a whole big canvas and divide it with buffers; it would do the trick

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [June 25, 2020, 11:19pm UTC](https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107/4 "2020-06-25T23:19:50Z")

</div>

Oh by div I mean

.

I’m only using 1 canvas at a time.

1. canvas1 displayed (type1; centered horizontally)
2. canvas1 removed; canvas2 displayed (type2; centered vertically and horizontally)
3. canvas2 removed; canvas3 displayed (type1; centered horizontally)

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 26, 2020, 6:48am UTC](https://discourse.processing.org/t/how-to-add-a-canvas-to-a-div-and-center-it/22107/5 "2020-06-26T06:48:31Z")

</div>

that’s what I’m saying… Canvas and buffers, they both only start from the top left, seen it, you can manipulate buffers and not canvas, do it use the image function of the buffer in a way to do it…