@nick-hill-dev/full-screen-canvas
v1.3.0
Published
Easily create and manage any number of HTML canvas elements that fill the window and / or screen.
Downloads
3
Readme
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-canvasExamples 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 directoryAdding 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.bodyor
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.