p5.js windowWidth

Last Updated : 10 Aug, 2023

The windowWidth variable in p5.js is a system variable that is used to store the width of the inner window and it maps to window.innerWidth. Syntax:

windowWidth

Parameters: This function does not accept any parameter. Below program illustrates the windowWidth variable in p5.js: Example-1:

javascript

function setup() {
  
    createCanvas(1000, 400);
  
    // Set text size to 40px
    textSize(20);
}

function draw() {
    background(200);
  
    rect(mouseX, mouseY, 30, 30);
  
    //Use of windowWidth Variable
    text("Window Width is " + windowWidth, 30, 40);
}

Output:

Example-2:

javascript

function setup() {

    // set height to window width 
    width = windowWidth;

    //create Canvas of size 380*80 
    createCanvas(width, 100);
}

function draw() {
    background(220);
    textSize(16);
    textAlign(CENTER);
    fill(color('Green'));

    //use of windowWidth variable
    text("windowWidth of Canvas is : "
         + width, width / 2, height / 2);
}

Output:

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

p5.js windowHeight

sarthak_ishu11

Improve

Article Tags :

p5.js windowWidth

Similar Reads

p5.js Environment

p5.js Color

p5.js Shape

p5.js Constants and Structure

p5.js DOM and Rendering

p5.js Transform

p5.js Data

p5.js Events

Thank You!

What kind of Experience do you want to share?