// Aerobic Respiration Cycle



// Creating a 512x512 canvas



// Getting the 2d context



// Drawing the aerobic respiration cycle



// Drawing the mitochondria

ctx.fillStyle = '#E0E0E0'; // Mitochondria color

ctx.fillRect(50, 50, 150, 150); // Drawing the mitochondria shape



// Drawing the inner membrane

ctx.fillStyle = '#FFFFFF'; // Inner membrane color

ctx.fillRect(80, 80, 90, 90); // Drawing the inner membrane shape



// Drawing the outer membrane

ctx.strokeStyle = '#000000'; // Outer membrane color

ctx.lineWidth = 2; // Line width

ctx.strokeRect(50, 50, 150, 150); // Drawing the outer membrane shape



// Drawing the electron transport chain

ctx.fillStyle = '#FFD700'; // Electron transport chain color

ctx.beginPath();

ctx.arc(125, 125, 20, 0, Math.PI * 2); // Drawing the first circle

ctx.arc(125, 125, 40, 0, Math.PI * 2); // Drawing the second circle

ctx.arc(125, 125, 60, 0, Math.PI * 2); // Drawing the third circle

ctx.fill();



// Drawing the ATP synthase

ctx.fillStyle = '#00FF00'; // ATP synthase color

ctx.beginPath();

ctx.arc(170, 125, 10, 0, Math.PI * 2); // Drawing the ATP synthase shape

ctx.fill();



// Drawing the glucose molecule

ctx.fillStyle = '#FF0000'; // Glucose molecule color

ctx.beginPath();

ctx.moveTo(230, 125); // Starting point

ctx.lineTo(250, 110); // Drawing a line

ctx.lineTo(250, 140); // Drawing a line

ctx.closePath();

ctx.fill();



// Drawing the oxygen molecule

ctx.fillStyle = '#0000FF'; // Oxygen molecule color

ctx.beginPath();

ctx.arc(275, 125, 10, 0, Math.PI * 2); // Drawing the oxygen molecule shape

ctx.fill();



// Drawing the arrows representing the steps of aerobic respiration

ctx.fillStyle = '#000000'; // Arrow color



// Drawing the arrow from glucose to pyruvate

ctx.beginPath();

ctx.moveTo(270, 125); // Starting point

ctx.lineTo(290, 125); // Drawing a line

ctx.lineTo(285, 120); // Drawing a line for the arrowhead

ctx.moveTo(290, 125); // Moving back to the end of the line

ctx.lineTo(285, 130); // Drawing a line for the arrowhead

ctx.stroke();



// Drawing the arrow from pyruvate to acetyl-CoA

ctx.beginPath();

ctx.moveTo(320, 125); // Starting point

ctx.lineTo(340, 125); // Drawing a line

ctx.lineTo(335, 120); // Drawing a line for the arrowhead

ctx.moveTo(340, 125); // Moving back to the end of the line

ctx.lineTo(335, 130); // Drawing a line for the arrowhead

ctx.stroke();



// Drawing the arrow from acetyl-CoA to citric acid

ctx.beginPath();

ctx.moveTo(370, 125); // Starting point

ctx.lineTo(390, 125); // Drawing a line

ctx.lineTo(385, 120); // Drawing a line for the arrowhead

ctx.moveTo(390, 125); // Moving back to the end of the line

ctx.lineTo(385, 130); // Drawing a line for the arrowhead

ctx.stroke();



// Drawing the arrow from citric acid to ATP

ctx.beginPath();

ctx.moveTo(430, 125); // Starting point

ctx.lineTo(450, 125); // Drawing a line

ctx.lineTo(445, 120); // Drawing a line for the arrowhead

ctx.moveTo(450, 125); // Moving back to the end of the line

ctx.lineTo(445, 130); // Drawing a line for the arrowhead

ctx.stroke();



// Drawing the arrow from ATP to electron transport chain

ctx.beginPath();

ctx.moveTo(480, 125); // Starting point

ctx.lineTo(500, 125); // Drawing a line

ctx.lineTo(495, 120); // Drawing a line for the arrowhead

ctx.moveTo(500, 125); // Moving back to the end of the line

ctx.lineTo(495, 130); // Drawing a line for the arrowhead

ctx.stroke();



// Adding some text labels

ctx.font = '14px Arial'; // Font style

ctx.fillStyle = '#000000'; // Text color



ctx.fillText('Glucose', 220, 100); // Glucose label

ctx.fillText('Oxygen', 260, 160); // Oxygen label

ctx.fillText('Pyruvate', 295, 100); // Pyruvate label

ctx.fillText('Acetyl-CoA', 330, 100); // Acetyl-CoA label

ctx.fillText('Citric Acid', 380, 100); // Citric Acid label

ctx.fillText('ATP', 440, 100); // ATP label

ctx.fillText('Electron', 485, 100); // Electron label

ctx.fillText('Transport Chain', 460, 120); // Transport Chain label



// Have a break, you've drawn a masterpiece!



// Just kidding, keep drawing!



// You're doing great! Keep up the good work!