What is the best way to expand this HTML5 canvas script to fill the entire screen?

Question

What is the best way to expand this HTML5 canvas script to fill the entire screen?

I am having issues adjusting the canvas to fill the entire window. Currently, it is set to 500x500. As a beginner in coding, any assistance would be greatly appreciated! Thank you.

Below is the code snippet:

<!DOCTYPE html>
<html>
<head>
    <title>Creating a Starfield Effect in HTML 5</title>
    <script>
        window.onload = function() {

            /* --- configuration start --- */

            var starfieldCanvasId     = "starfieldCanvas", // id of the canvas for the starfield
                framerate             = 60,                // frames per second of the animation
                numberOfStarsModifier = 0.15,              // Number of stars, affects performance
                flightSpeed           = 0.003;             // speed of the flight across the canvas

            /* --- configuration end --- */

            var canvas        = document.getElementById(starfieldCanvasId),
                context       = canvas.getContext("2d"),
                width         = canvas.width,
                height        = canvas.height,
                numberOfStars = width * height / 1000 * numberOfStarsModifier,
                dirX          = width / 2,
                dirY          = height / 2,
                stars         = [],
                TWO_PI        = Math.PI * 2;

            // initializing starfield
            for(var x = 0; x < numberOfStars; x++) {
                stars[x] = {
                    x: range(0, width),
                    y: range(0, height),
                    size: range(0, 1)
                };
            }

            // change animation center on mouse move
            canvas.onmousemove = function(event) {
                dirX = event.offsetX,
                dirY = event.offsetY;
            }

            // initiate animation loop at specified fps
            window.setInterval(tick, Math.floor(1000 / framerate));

            // main animation loop
            function tick() {
                var oldX,
                    oldY;

                // reset canvas for next frame
                context.clearRect(0, 0, width, height);

                for(var x = 0; x < numberOfStars; x++) {
                    // save current position
                    oldX = stars[x].x;
                    oldY = stars[x].y;

                    // calculate new position
                    stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
                    stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
                    stars[x].size += flightSpeed;

                    // if star is out of bounds, reset
                    if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                        stars[x] = {
                            x: range(0, width),
                            y: range(0, height),
                            size: 0
                        };
                    }

                    // draw star
                    context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
                    context.lineWidth = stars[x].size;
                    context.beginPath();
                    context.moveTo(oldX, oldY);
                    context.lineTo(stars[x].x, stars[x].y);
                    context.stroke();
                }
            }

            // generate random number within a range
            function range(start, end) {
                return Math.random() * (end - start) + start;
            }
        };
    </script>
</head>
<body style="background:#000;">
    <canvas width="500" height="500" id="starfieldCanvas"></canvas>
</body>
</html>

Original code and credits:

javascript html css

Answer 1

Answer №1

If you're looking to make your script automatically determine the screen size and adjust the canvas to fill the entire screen rather than being fixed at 500 x 500, you can achieve this programmatically.

To determine the viewport size dynamically, you can use the following code to get the width and height accurately. (Source):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Once you have the viewport dimensions, you can then set the canvas size accordingly:

canvas.width  = width;
canvas.height = height;

So, in your case, the complete code would look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Canvas Sizing with Starfield Effect</title>
    <script>
        window.onload = function() {

            /* --- config start --- */

            var starfieldCanvasId     = "starfieldCanvas", // ID of the canvas to use
                framerate             = 60,                // Frames per second for the animation
                numberOfStarsModifier = 0.15,              // Number of stars, performance impact consider
                flightSpeed           = 0.003;             // Speed of flight, adjust for desired speed

            var width = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

            var height = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

            /* ---- config end ---- */

            var canvas        = document.getElementById(starfieldCanvasId),
                context       = canvas.getContext("2d"),
                stars         = [],
                TWO_PI        = Math.PI * 2;

                canvas.width  = width;
                canvas.height = height;

                numberOfStars = width * height / 1000 * numberOfStarsModifier;
                dirX          = width / 2;
                dirY          = height / 2;

            // Initialize starfield
            for(var x = 0; x < numberOfStars; x++) {
                stars[x] = {
                    x: range(0, width),
                    y: range(0, height),
                    size: range(0, 1)
                };
            }

            // When mouse moves over canvas, change the center point of animation
            canvas.onmousemove = function(event) {
                dirX = event.offsetX,
                dirY = event.offsetY;
            }

            // Start animation with specified FPS
            window.setInterval(tick, Math.floor(1000 / framerate));

            // Main animation loop
            function tick() {
                var oldX,
                    oldY;

                // Clear canvas for next frame
                context.clearRect(0, 0, width, height);

                for(var x = 0; x < numberOfStars; x++) {
                    // Save old position
                    oldX = stars[x].x;
                    oldY = stars[x].y;

                    // Update star position
                    stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
                    stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
                    stars[x].size += flightSpeed;

                    // Reset star if out of bounds
                    if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                        stars[x] = {
                            x: range(0, width),
                            y: range(0, height),
                            size: 0
                        };
                    }

                    // Draw the star
                    context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
                    context.lineWidth = stars[x].size;
                    context.beginPath();
                    context.moveTo(oldX, oldY);
                    context.lineTo(stars[x].x, stars[x].y);
                    context.stroke();
                }
            }

            // Generate a random number within a range
            function range(start, end) {
                return Math.random() * (end - start) + start;
            }
        };
    </script>
</head>
<body style="background:#000;">
    <canvas id="starfieldCanvas"></canvas>
</body>
</html>

I've also tested this on Fiddle. You can view it here: Fiddle

Hopefully, this solution works for you. Feel free to let me know if it does!.

Answer 2

If you're looking to make your script automatically determine the screen size and adjust the canvas to fill the entire screen rather than being fixed at 500 x 500, you can achieve this programmatically.

To determine the viewport size dynamically, you can use the following code to get the width and height accurately. (Source):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Once you have the viewport dimensions, you can then set the canvas size accordingly:

canvas.width  = width;
canvas.height = height;

So, in your case, the complete code would look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Canvas Sizing with Starfield Effect</title>
    <script>
        window.onload = function() {

            /* --- config start --- */

            var starfieldCanvasId     = "starfieldCanvas", // ID of the canvas to use
                framerate             = 60,                // Frames per second for the animation
                numberOfStarsModifier = 0.15,              // Number of stars, performance impact consider
                flightSpeed           = 0.003;             // Speed of flight, adjust for desired speed

            var width = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

            var height = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

            /* ---- config end ---- */

            var canvas        = document.getElementById(starfieldCanvasId),
                context       = canvas.getContext("2d"),
                stars         = [],
                TWO_PI        = Math.PI * 2;

                canvas.width  = width;
                canvas.height = height;

                numberOfStars = width * height / 1000 * numberOfStarsModifier;
                dirX          = width / 2;
                dirY          = height / 2;

            // Initialize starfield
            for(var x = 0; x < numberOfStars; x++) {
                stars[x] = {
                    x: range(0, width),
                    y: range(0, height),
                    size: range(0, 1)
                };
            }

            // When mouse moves over canvas, change the center point of animation
            canvas.onmousemove = function(event) {
                dirX = event.offsetX,
                dirY = event.offsetY;
            }

            // Start animation with specified FPS
            window.setInterval(tick, Math.floor(1000 / framerate));

            // Main animation loop
            function tick() {
                var oldX,
                    oldY;

                // Clear canvas for next frame
                context.clearRect(0, 0, width, height);

                for(var x = 0; x < numberOfStars; x++) {
                    // Save old position
                    oldX = stars[x].x;
                    oldY = stars[x].y;

                    // Update star position
                    stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
                    stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
                    stars[x].size += flightSpeed;

                    // Reset star if out of bounds
                    if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                        stars[x] = {
                            x: range(0, width),
                            y: range(0, height),
                            size: 0
                        };
                    }

                    // Draw the star
                    context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
                    context.lineWidth = stars[x].size;
                    context.beginPath();
                    context.moveTo(oldX, oldY);
                    context.lineTo(stars[x].x, stars[x].y);
                    context.stroke();
                }
            }

            // Generate a random number within a range
            function range(start, end) {
                return Math.random() * (end - start) + start;
            }
        };
    </script>
</head>
<body style="background:#000;">
    <canvas id="starfieldCanvas"></canvas>
</body>
</html>

I've also tested this on Fiddle. You can view it here: Fiddle

Hopefully, this solution works for you. Feel free to let me know if it does!.

What is the best way to expand this HTML5 canvas script to fill the entire screen?

Answer №1

Similar questions

What is the best way to name a force-directed Graph using d3?

Is there a way to send an Ajax response to the web browser client as a downloadable file?

Resizing images within a container using Bootstrap to fit the screen dimensions

Accessing values from a JSON object in AngularJS without using a loop based on another field

React.js Material UI Dropdown Component

Unfolding the potential of variables in JSON.stringify with Node.js

Add the onmouseover attribute to dynamically alter the text

No changes occur within this JavaScript code

Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Submitting a Django POST request with an empty form in an HTML form

Validation of forms using ajax and javascript

Choosing the right option with the GeoPlugin technology

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

Instructions for securing a React Front End with Node.js Express-Sessions authentication:

AngularJS Firebase Login Scope Value Not Retained After Refresh

How to incorporate an icon into a React Bootstrap Dropdown menu

Locate elements based on an array input in Mongoose

Move the button above a hyperlink in a Bootstrap carousel

Step-by-step guide on implementing a real-time data array counter in React js

Leveraging tailwind for achieving dynamic height responsiveness