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

p5.js Coding Questions
1

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:

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

Type2:

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:

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().
)

1 Like
2

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

3

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

4

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)
5

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…