I'm currently facing a challenge in creating a chart that overlaps an image. The bars and text on the chart are displaying perfectly when I remove the background image. However, I'm struggling to get the bars and text to appear on top of the image. Any assistance on resolving this issue would be highly appreciated. Thank you.
js:
(function(){
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'images/bg.jpg';
img.addEventListener('load', function(){
ctx.drawImage(img, 0, 0, 400, 300);
},
false);
var charData = [Math.floor(Math.random()* 100), Math.floor(Math.random()* 100), Math.floor(Math.random()* 100), Math.floor(Math.random()* 100)];
//console.log(charData);
var maxBarHeight = 200;
var drawBars = function(){
ctx.font = '14px Georgia';
for(i=0; i<charData.length; i++){
ctx.beginPath();
ctx.fillStyle ='rgba(100, 200, 200, 0.75)';
var height = maxBarHeight*charData[i]/100;
ctx.height = height;
ctx.rect(i*80+90,270-height,50,height);
ctx.fill();
ctx.font.fillStyle ='rgb(255,255,255)';
ctx.fillText(charData[0], 100,50);
ctx.fillText(charData[1], 180,50);
ctx.fillText(charData[2], 265,50);
ctx.fillText(charData[3], 350,50);
}
};
var drawCharText = function(){
console.log("in draw text");
ctx.font = '20px Georgia';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillText('TEST GRADS', 30,30);
};
drawBars();
drawCharText();
})();
html:
<!DOCTYPE html>
<html>
<head>
<title>Goal9: Assignment: Canvas</title>
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>