In this HTML code snippet, I am trying to display the Colorado state flag using a canvas. However, I noticed that in order for the flag to be drawn correctly, I had to move certain lines of code from the window.onload() function to the drawLogo() function. This led me to believe that there might be an issue with the global variables canvas, ctx, x,, and y. I need these variables to be truly global because I plan to utilize them in other functions that will interact with the same canvas.
I confirmed that window.onload() is functioning properly as I can draw the flag by calling drawLogo() within it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logo</title>
<script type="text/javascript">
var canvas;
var ctx;
var x;
var y;
window.onload = function () {
canvas = document.getElementById('logo');
ctx = canvas.getContext('2d');
x = canvas.width;
y = canvas.height;
};
var drawLogo = function() {
var radius = 23;
var counterClockwise = false;
ctx.beginPath();
ctx.rect(3, 20, 75, 30);
ctx.fillStyle = 'rgba(0,0,255,0.8)';
ctx.fill();
...
};
</script>
</head>
<body>
<div>
<canvas id="logo" width="600" height="150"></canvas>
<script type="text/javascript">
drawLogo();
</script>
</div>
</body>
</html>