Skip to content
Related Articles

Related Articles

p5.js | displayWidth Variable
  • Last Updated : 09 May, 2019

The displayWidth variable in p5.js is used to store the width of the screen display of the device and it is according to The default pixelDensity. This variable is used to run a full-screen program on any display size. Multiply this by pixelDensity to return actual screen size.

Syntax:

displayWidth()

Parameters: This function does not accept any parameter.

Below program illustrates the displayWidth variable in p5.js:
Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

function setup() {
  
    // use of displayWidth variable
    createCanvas(displayWidth, 400);
  
    // Set text size to 40px
    textSize(20);
}
  
function draw() {
  
    background(200);
    rect(mouseX, mouseY, 30, 30);
  
    //Use of windowWidth Variable
    text("Display Width is " + windowWidth, 30, 40);
}

chevron_right


Output:



Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

function setup() {
  
    // use of displayWidth variable
    createCanvas(displayWidth, displayHeight);
  
    // Set text size to 40px
    textSize(20);
}
  
function draw() {
    background(200);
    rect(mouseX, mouseY, 30, 30);
  
    //Use of windowWidth Variable
    text("Canvas Display Height is " + displayHeight, 30, 40);
}

chevron_right


Output:

Reference: https://p5js.org/reference/#/p5/displayWidth

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :