esc-canvas
v1.1.3
Published
ESC-canvas is a JavaScript library for rendering animated, Eurovision-themed backgrounds on an HTML canvas.
Readme
ESC-canvas
ESC-canvas is a JavaScript library for rendering animated, Eurovision-themed backgrounds on an HTML canvas.
Installation
npm install esc-canvasUsage
Import
initCanvas:import { initCanvas } from 'esc-canvas';Get your canvas element:
<!-- In your HTML --> <canvas id="myEurovisionCanvas"></canvas>// In your JavaScript const canvasElement = document.getElementById('myEurovisionCanvas');Initialize the animation:
initCanvastakes two arguments:- The HTML canvas element.
- The animation type (string). Available types are:
'onboarding''vote''thankyou'
// Example: const destroyAnimation = initCanvas(canvasElement, 'onboarding');The
initCanvasfunction returns a cleanup function. Call this function if you need to stop the animation and remove event listeners (e.g., when a component unmounts in a SPA).// To stop and clean up: // destroyAnimation();
Example (app.js):
import { initCanvas } from 'esc-canvas';
document.addEventListener('DOMContentLoaded', () => {
const canvasElement = document.getElementById('myEurovisionCanvas');
if (canvasElement) {
// Choose an animation type: 'onboarding', 'vote', or 'thankyou'
const animationType = 'thankyou';
const destroyAnimation = initCanvas(canvasElement, animationType);
// Optional: Clean up if the canvas/component is removed
// For example, in a framework component's unmount lifecycle:
// componentWillUnmount() {
// if (destroyAnimation) {
// destroyAnimation();
// }
// }
} else {
console.error("Canvas element #myEurovisionCanvas not found!");
}
});Make sure your HTML canvas element is styled appropriately to be visible (e.g., set width and height).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ESC Canvas Demo</title>
<style>
body, html { margin: 0; padding: 0; overflow: hidden; }
#myEurovisionCanvas {
display: block;
width: 100vw;
height: 100vh;
background-color: #000; /* Or any other background */
}
</style>
</head>
<body>
<canvas id="myEurovisionCanvas"></canvas>
<script type="module" src="app.js"></script>
</body>
</html>