Open In App

p5.js fullscreen() function

Last Updated : 10 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The fullscreen() function in p5.js is used to get the current fullscreen state of the user’s browser window. If an argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input.

Syntax:

fullscreen()

Parameters: The function does not accept any parameters.

Below program illustrates the fullscreen() function in p5.js:

Example:




function setup() {
      
    // Set the background color
    background(200);
}
function mousePressed() {
      
    // Set the value of fullscreen
    // into the variable
    let fs = fullscreen();
      
    // Call to fullscreen function
    fullscreen(!fs); 
}


Output:
Before Clicking the screen:

After Clicking the screen:

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


Previous Article
Next Article

Similar Reads

How to create fullscreen search bar using HTML , CSS and JavaScript ?
In this article, you will learn how to create a full-screen search Bar. Here You will be required to create two divs. One for the overlay container and the other for the overlay content container. HTML Code: The first step is to create an HTML file. Here we will create the basic structure for the search bar. Here we will also use an icon for the se
2 min read
Web Window API | DOM Window fullscreen property
The Window interface has a fullscreen property which tells whether the window is displayed in fullscreen mode or not. Syntax: BoolVal = windowReference.fullScreen; Return value: Boolean True: If windows is in fullscreen mode. False: If windows are not in fullscreen mode. Example : <!DOCTYPE html> <html> <head> <title> Window
1 min read
How to set fullscreen iframe?
The iframe in HTML stands for Inline Frame. The ” iframe ” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. For the fullscreen Iframe, you have to cover the entire viewport.
2 min read
How to design Bootstrap Fullscreen Select feature for Mobiles ?
In this article, we will learn how to design Bootstrap fullscreen select feature for mobile devices. It provides advanced HTML full screen select functionality.It provides in and out animations.It provides open and close events function callbacks.It provides CSS3 animated buttons, dropdowns and texts. Please download the required pre-compiled libra
3 min read
How to make fullscreen toolbars using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making fullscreen toolbars using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jqu
1 min read
Fullscreen API using JavaScript
The window supports the full-screen interface by using web API. We can activate or deactivate the full-screen mode of the screen. The fullscreen API provides methods to present a specific element in a full-screen mode. Approach: The onclick event will trigger the activate() method which will be for activating the full screen.The same will be applie
1 min read
jQuery Mobile Toolbar fullscreen Option
jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. In this article, we will use the jQuery Mobile Toolbar fullscreen option. When the fullscreen option is set to true, the toolbar wi
2 min read
Primer CSS Details Darkened Fullscreen Click Area
Primer CSS is an open-source component-rich CSS library that helps developers to develop beautiful and responsive websites which work on devices of any screen size. It has a wide range of components that fulfills the need of any website. In this article, we will be seeing Primer CSS Details Darkened Fullscreen Click Area. The details-overlay-dark c
2 min read
Primer CSS Details Fullscreen Click Area
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, an
2 min read
Angular PrimeNG Galleria FullScreen
Angular PrimeNG is an open-source UI component library for Angular Applications. Using the components provided by Angular PrimeNG, one can create stunning and responsive angular applications. In this post, we will see Angular PrimeNG Galleria FullScreen. Galleria is an advanced component to display images in an attractive manner. When the galleria
4 min read