Tengo un lienzo que muestra el código binario de la matriz lloviendo. Me gustaría agregar una imagen sobre el lienzo en cuestión.

Esto es lo que tengo

 <div class="rain"> <canvas id="Matrix"></canvas> <div class ="imgclass"> <img class="imgclass" src="assets/image.jpg"/> </div> </div>

JavaScript para el lienzo

 const canvas = document.getElementById('Matrix'); const context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const nums = '0123456789'; const alphabet = 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);

y el CSS:

 .rain { background: black; height: 40%; overflow: hidden; } canvas { background-image: url("assets/img.jpg"); }

En este momento, la imagen en cuestión aparece debajo del lienzo en lugar de en el lienzo (es decir, en el medio).