@nick-hill-dev/full-screen-canvas NPM

FullScreenCanvas Library

The FullScreenCanvas library is a lightweight library that simplifies the process of creating and removing one or more full-screen HTML <canvas /> elements. Each canvas occupies the full width and height of the window area, even if the window is resized.

To use this package in your software:

npm install @nick-hill-dev/full-screen-canvas

Examples are in the demos directory. To run them, execute the following commands:

npm install
npx tsc
npx rollup -c --bundleConfigAsCjs # Creates js file in the bin directory, and now you can open the pages in the demos directory

Adding a Full-Screen Canvas

To add a full-screen canvas element to your web page, simply call the add method of the FullScreenCanvas class. By default, the canvas will be appended to the document.body element. However, you can optionally pass in a parent element to append the canvas to.

const canvas = FullScreenCanvas.add(); // Appends the new Canvas element to document.body

const parent = document.getElementById('my-canvas-container');
const canvas = FullScreenCanvas.add(parent);

It is also possible to make the canvas fill the whole screen rather than just the browser window, though it is necessary to do so as a result of a user action:

window.onclick = () => {
    FullScreenCanvas.add(document.body, { fullScreen: true });
}

Removing a Full-Screen Canvas

To remove a full-screen canvas element from your web page, simply call the remove method of the FullScreenCanvas class and pass in the canvas element that you wish to remove.

FullScreenCanvas.remove(canvas);

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FullScreenCanvas Example</title>
</head>
<body>
    <script src="fullScreenCanvas.js"></script>
    <script>
        const canvas = FullScreenCanvas.add();
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    </script>
</body>
</html>

License

The FullScreenCanvas library was written by Nick Hill and is released under the MIT license. See LICENSE for more information.

canvas

1.3.0

2 years ago

1.1.0

2 years ago