I am currently working on a simple animation project involving a bubble rising in a beer bottle. However, I am facing difficulties with the background image not displaying properly. When running the code, only the bubble animation is visible without the beer image.
Here is my code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Beer Animation</title>
</head>
<body>
<div id="container">
<img class='img' src="https://i.imgur.com/VW3zcXq.jpg" alt="" />
<canvas id="beer" width="400" height="520" style="border:solid 1px">
</canvas>
</div>
<script type="text/javascript">
var c=document.getElementById("beer");
var ctx=c.getContext("2d");
var width = c.width; // Size of Canvas
var heigth = c.height;
var x, y; // Current x and y coordinates
var x0 = 50; // Starting Coordinates
var y0 = 400;
var v0x = 0.05; // Speed in Pixels/Millisecond
var v0y = 0.00005;
var dt = 20; // Time Interval in Milliseconds
var r = 40; // Radius
var time; // Current Runtime
var i = 0;
draw(ctx);
var active = setInterval(function() {draw(ctx); }, dt);
function draw(context) {
context.fillRect(0,0,width,heigth);
context.fillStyle="#FFFFFF";
context.beginPath();
context.arc(x, y, r, 0, Math.PI*2, true);
context.closePath();
context.stroke();
x = x0 + v0x;
y = y0 + v0y - time;
i += 0.1;
time = i * dt;
if (time >= 5000) {
clearInterval(active)
}
}
</script>
</body>
</html>
I have attempted to adjust the z-index, but it seems to be ineffective:
body{text-align: center;}
.img{position:absolute;z-index:-1;}
#container{
display:inline-block;
width: 400px;
height:520px;
margin: 0 auto;
position:relative;
}
#gameCanvas{
position:relative;
z-index:20;
}
Any assistance would be greatly appreciated.