I've run into a problem where I'm struggling to overlay text, an image, and a video on a JavaScript script. I've searched on YouTube and Google for answers, but haven't found any solutions yet. Can anyone help me out? Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title></title>
</head>
<body style="background-color: black">
<canvas id="Matrix" style="width: 100%; height: 100%;"></canvas>
<script src="./index.js"></script>
</body>
</html>
html {
background: black;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
const canvas = document.getElementById('Matrix');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;
const fontSize = 16;
const columns = canvas.width/fontSize;
const rainDrops = [];
for( let x = 0; x < columns; x++ ) {
rainDrops[x] = 1;
}
const draw = () => {
context.fillStyle = 'rgba(0, 0, 0, 0.05)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#0F0';
context.font=`fontSize + 'px monospace`;
for(let i = 0; i < rainDrops.length; i++)
{
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
context.fillText(text, i*fontSize, rainDrops[i]*fontSize);
if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
rainDrops[i] = 0;
}
rainDrops[i]++;
}
};
setInterval(draw, 30);
I hope to use the JavaScript script as the background of my website while utilizing only HTML, CSS, and JS.