P5.js: screen.width vs window.innerWidth

[shiffman]

As of now displayWidth returns screen.width. However I think that a sometimes useful value (for when a browser is not fullscreen) is window.innerWidth. Should we have something like windowWidth and windowHeight?

Related to this, I'm trying to create an example where a canvas resizes when onresize is triggered. size() works but the global width and height are unaffected. Not sure if we should have a global resizeCanvas() method or just in this situation I should be required to say ellipse(canvas.width/2,canvas.height/2,100,100);

Below works FYI.

var canvas;

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);
}

function draw() {
  background(51);
  fill(255);
  ellipse(width/2,height/2,100,100);
}

window.onresize = function() {
  var w = window.innerWidth;
  var h = window.innerHeight;  
  canvas.size(w,h);
  width = w;
  height = h;
};

[taseenb]

yes, that's a good idea. actually the screen size is not too useful in the browser (unless in fullscreen mode, like the Processing presentation view). window.innerWidth/Height is generally very useful.

btw, the fullscreen mode is not easy to implement cross-browser. what do you think to add it to the p5 api? see this nice hack: https://github.com/sindresorhus/screenfull.js

[evhan55]

I also like the idea of windowHeight/windowWidth.

What are some ideas to include full screen mode in the API, @taseenb ?

@shiffman Good question of whether the global width and height refers to the 'canvas' size, the 'sketch' size or the 'window' size. I think @lmccart recently pointed out to me that the 'sketch' and the 'window' are really the same thing, since the sketch is meant to exist within the entire window and be able to place DOM elements anywhere.

@shiffman @taseenb @lmccart some thoughts:

_current p5.js_

• displayHeight
• displayWidth
• width (canvas)
• height (canvas)
• canvas.size() (canvas)
• no global size() method

_current Processing_

• displayHeight
• displayWidth
• width (canvas)
• height (canvas)
• size() (of canvas)

_strawman proposed p5.js_

• windowHeight
• windowWidth
• canvasHeight
• canvasWidth
• no global width or height since they are just the same as window, since all sketches take up the entire window
• no global size() command?

This kind of depends on whether we see people using the draw loop only for canvas drawing commands or not. If so, then width and height can refer to the canvas, but it can be confusing for someone who uses the draw loop to handle animation outside of canvas, say by moving PElements around on the page?

This issue opens up a can of worms about how to think about the DOM-API portion of p5.js in relation to the canvas-API portion of it....

At the bare minimum, we could add windowHeight and windowWidth while we decide how to treat a global height and global width? I'm not sure!

[lmccart]

I'm not sure I would replace width and height with canvasWidth and canvasHeight. right now there is sort of an understanding that all drawing related functions are by default in relation to and affecting the canvas. ie we have rect and fill not canvasRect and canvasFill. I think for a beginner, it's nice to just start with the idea that the canvas is everything to worry about, and width and height are nice short words that fit with the rest of the api.

so now we have:

• width > canvas width
• height > canvas height
• displayWidth > screen.width
• displayHeight > screen.height
• windowWidth > window.innerWidth
• windowHeight > window.innerHeight

@shiffman, in your .size() example, I think that function should update width and height, too -- this seems like a bug to me atm. I can add this fix.

[evhan55]

Yeah, that makes sense.
I am eager to figure out how draw() relates to DOM functions.

[lmccart]

ok, I just pushed some fixes for windowWidth/Height and width and height updating on size() call.

this should work:

var canvas;

function setup() {
  canvas = createCanvas(windowWidth,windowHeight);
}

function draw() {
  background(51);
  ellipse(width/2,height/2,width/2,height/2);
}

window.onresize = function() {
  canvas.size(windowWidth, windowHeight);
};

[lmccart]

I think this resolves this issue?

[webinger]

Hey I am playing around with this code

function setup() {
canvas = createCanvas(window.innerWidth, window.innerHeight);
}

window.onresize = function() {
var w = window.innerWidth;
var h = window.innerHeight;
canvas.size(w,h);
width = w;
height = h;
};


But when I resize my browser window it does not set the canvas size instantly.
What am I doing wrong?

[lmccart]

hi @webinger please see the resizeCanvas() function: http://p5js.org/reference/#p5/resizeCanvas

[RGFTheCoder]

@webinger did you declare the "canvas" object?

var canvas = createCanvas(window.innerWidth, window.innerHeight);

[abhi0977]

ok, I just pushed some fixes for windowWidth/Height and width and height updating on size() call.

this should work:

var canvas;

function setup() {
  canvas = createCanvas(windowWidth,windowHeight);
}

function draw() {
  background(51);
  ellipse(width/2,height/2,width/2,height/2);
}

window.onresize = function() {
  canvas.size(windowWidth, windowHeight);
};

@lmccart In safari when you directly maximise the screen then view will not get updated.

[Spongman]

Shouldn’t you be using resiseCanvas() if you want the renderer to resize?