Coordinates on canvas larger than the browser window size

Stixan

I'm puzzled trying to understand what happens to the coordinates when I specify a canvas size that is taller than the current browser window.

Consider this:

function setup() {
    createCanvas(400, 400); // canvas will easily fit inside my browser window
    noStroke();
    fill(255);
}
function draw() {
    background(0);
    ellipse(0, 0, 20, 20);
}

As expected part of a white ellipse is visible in the top left corner of the canvas.

Now, if I extend the canvas size to exceed the height of my browser window:

function setup() {
    createCanvas(400, 1400); // canvas does not fit inside my browser window
    noStroke();
    fill(255);
}
function draw() {
    background(0);
    ellipse(0, 0, 20, 20);
}

The canvas appears to be 1400 pixels tall as specified. However, the white ellipse is NOT visible in the top left corner of the canvas as I would expect?

I'm sure the answer is straightforward. But can anybody explain to me what happens to the canvas coordinates when the canvas gets bigger than the visible browser window area?

(Running p5.js ver 0.5.7, Chrome 56.0.2924.87, OSX 10.12.2)

GoToLoop

AFAIK, a vertical scrollbar should appear to the right side of the canvas. :-?

Stixan

UPDATE: Digging deeper, I have found that the issue relates to the CSS I have used to center my canvas horizontally and vertically in the browser window. I have used the code from the "Centering the sketch on the page with CSS" section on this page: https://github.com/processing/p5.js/wiki/Positioning-your-canvas

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;

  /* This centers our sketch horizontally. */
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
}

When I comment out the "height: 100%", the ellipse appears as expected even on very tall canvases. However, small canvases are now vertically aligned to the top of the browser window.

I'll try some other ways of centering my canvas that works for canvases smaller and larger than the browser window.