<!DOCTYPE html>

<html>

<head>

<title>Glitch Effect on Ordinal Image</title>

<style>

html, body {

margin: 0;

padding: 0;

background: #000;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

canvas {

border: 1px solid #fff;

}

</style>

</head>

<body>

// Get the canvas and its drawing context

const canvas = document.getElementById("glitchCanvas");

const ctx = canvas.getContext("2d");

// Create an Image instance for your ordinal image.

// Make sure the URL is correct and accessible.

const img = new Image();

img.crossOrigin = "Anonymous"; // Use if the image is hosted externally

img.src = "/content/838488a29985ba19437670f05b6169bf08f3338cdb71d983362fb8733b2d6e9ei0";

// When the image is loaded, set up the canvas and start the glitch effect.

img.onload = () => {

// Set canvas dimensions to match the image

canvas.width = img.width;

canvas.height = img.height;

// Create an offscreen canvas to store the original image.

const offCanvas = document.createElement("canvas");

offCanvas.width = img.width;

offCanvas.height = img.height;

const offCtx = offCanvas.getContext("2d");

offCtx.drawImage(img, 0, 0);

// Define the glitch effect animation function.

function glitchEffect() {

// Draw the original image from the offscreen canvas.

ctx.drawImage(offCanvas, 0, 0);

// Define a random number of slices to glitch.

const sliceCount = Math.floor(Math.random() * 10) + 5; // between 5 and 15 slices

for (let i = 0; i < sliceCount; i++) {

// Choose a random y-coordinate and a random slice height.

const y = Math.floor(Math.random() * canvas.height);

const sliceHeight = Math.floor(Math.random() * 30) + 1; // slice height between 1 and 30 pixels

// Choose a random horizontal shift for the slice.

const shift = Math.floor(Math.random() * 30) - 15; // shift between -15 and 15 pixels

// Redraw the chosen slice with the horizontal offset.

// The parameters for drawImage are:

// (source canvas, source x, source y, source width, source height,

// destination x, destination y, destination width, destination height)

ctx.drawImage(offCanvas, 0, y, canvas.width, sliceHeight, shift, y, canvas.width, sliceHeight);

}

// Request the next animation frame to continue the glitch effect.

requestAnimationFrame(glitchEffect);

}

// Start the glitch animation.

glitchEffect();

};

// Optional: Handle loading errors

img.onerror = () => {

console.error("Error loading the ordinal image.");

ctx.font = "20px sans-serif";

ctx.fillStyle = "#fff";

ctx.fillText("Failed to load image.", 10, 30);

};

</script>

</body>

</html>