<meta charset="utf-8">
<canvas id='myCanvas'></canvas>
<script type="text/javascript">
const myCanvas = document.getElementById('myCanvas');
myCanvas.width = window.innerWidth - 20;
myCanvas.height = window.innerHeight - 20;
myCanvas.style.backgroundColor = "lightgrey";
const context = myCanvas.getContext('2d');
let flags = ['Brazil', 'Germany'];
var iterator = 1;
drawFlag(flags[0]);
setInterval(updateScreen, 3000);
function drawFlag (country) {
if (country === 'Brazil') {
context.fillStyle = 'green';
context.fillRect(myCanvas.width / 2 - 300, myCanvas.height / 2 - 200, 600, 400);
context.fillStyle = 'yellow';
context.beginPath();
context.moveTo(myCanvas.width / 2, myCanvas.height / 2 - 150);
context.lineTo(myCanvas.width / 2 - 250, myCanvas.height / 2);
context.lineTo(myCanvas.width / 2, myCanvas.height / 2 + 150);
context.lineTo(myCanvas.width / 2 + 250, myCanvas.height / 2);
context.fill();
context.fillStyle = 'darkblue';
context.beginPath();
context.arc(myCanvas.width / 2, myCanvas.height / 2, 100, 0, 2 * Math.PI);
context.fill();
iterator = 1;
}
if (country === 'Germany') {
context.fillStyle = 'black';
context.fillRect(myCanvas.width / 2 - 300, myCanvas.height / 2 - 200, 600, 133);
context.fillStyle = 'red';
context.fillRect(myCanvas.width / 2 - 300, myCanvas.height / 2 - 67, 600, 133);
context.fillStyle = 'yellow';
context.fillRect(myCanvas.width / 2 - 300, myCanvas.height / 2 + 67, 600, 133);
iterator = 0;
}
}
function clearScreen () {
context.clearRect(0, 0, myCanvas.width, myCanvas.height);
}
function updateScreen () {
clearScreen();
drawFlag(flags[iterator]);
}
</script>