// Batmen X Joker



// Drawing the background

ctx.fillStyle = "#000000"; // Setting the background color to black

ctx.fillRect(0, 0, 512, 512); // Filling the entire canvas with black



// Drawing Batmen

ctx.fillStyle = "#0000FF"; // Setting the color for Batmen to blue

ctx.fillRect(100, 100, 200, 300); // Drawing Batmen's body

ctx.fillRect(75, 200, 50, 100); // Drawing Batmen's left arm

ctx.fillRect(300, 200, 50, 100); // Drawing Batmen's right arm

ctx.beginPath(); // Drawing Batmen's head

ctx.arc(200, 75, 50, 0, Math.PI * 2);

ctx.fill();



// Drawing Joker

ctx.fillStyle = "#FF0000"; // Setting the color for Joker to red

ctx.fillRect(250, 100, 100, 200); // Drawing Joker's body

ctx.beginPath(); // Drawing Joker's head

ctx.arc(300, 75, 50, 0, Math.PI * 2);

ctx.fill();

ctx.fillStyle = "#FFFFFF"; // Setting the color for Joker's face to white

ctx.fillRect(280, 60, 40, 30); // Drawing Joker's face



// Drawing Batmen's cape

ctx.fillStyle = "#000000"; // Setting the color for Batmen's cape to black

ctx.beginPath();

ctx.moveTo(100, 400); // Starting point for the cape

ctx.lineTo(300, 400); // Drawing the cape line

ctx.lineTo(250, 500); // Drawing the bottom of the cape

ctx.lineTo(150, 500); // Drawing the bottom of the cape

ctx.closePath();

ctx.fill();



// Drawing Joker's hair

ctx.fillStyle = "#FF00FF"; // Setting the color for Joker's hair to pink

ctx.beginPath();

ctx.moveTo(250, 100); // Starting point for Joker's hair

ctx.lineTo(350, 150); // Drawing the first hair strand

ctx.lineTo(320, 200); // Drawing the second hair strand

ctx.lineTo(380, 250); // Drawing the third hair strand

ctx.lineTo(250, 300); // Drawing the fourth hair strand

ctx.lineTo(120, 250); // Drawing the fifth hair strand

ctx.lineTo(180, 200); // Drawing the sixth hair strand

ctx.lineTo(150, 150); // Drawing the seventh hair strand

ctx.closePath();

ctx.fill();



// Adding details to Batmen and Joker

ctx.fillStyle = "#FFFFFF"; // Setting the color for the details to white



// Drawing Batmen's bat symbol

ctx.beginPath();

ctx.moveTo(200, 150); // Starting point for the bat symbol

ctx.lineTo(220, 180); // Drawing the first line of the symbol

ctx.lineTo(250, 160); // Drawing the second line of the symbol

ctx.lineTo(280, 180); // Drawing the third line of the symbol

ctx.lineTo(300, 150); // Drawing the fourth line of the symbol

ctx.lineTo(250, 120); // Drawing the fifth line of the symbol

ctx.closePath();

ctx.fill();



// Drawing Joker's smile

ctx.beginPath();

ctx.arc(300, 100, 25, 0.2 * Math.PI, 0.8 * Math.PI); // Drawing the smile

ctx.stroke();



// Drawing Batmen's utility belt

ctx.fillRect(150, 350, 200, 20); // Drawing the main part of the belt

ctx.fillStyle = "#FFD700"; // Setting the color for the belt buckle to gold

ctx.fillRect(230, 350, 50, 20); // Drawing the belt buckle



// Adding some shading to Batmen

ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; // Setting the color for shading to transparent black

ctx.fillRect(100, 100, 200, 300); // Applying shading to Batmen's body

ctx.fillRect(75, 200, 50, 100); // Applying shading to Batmen's left arm

ctx.fillRect(300, 200, 50, 100); // Applying shading to Batmen's right arm

ctx.beginPath(); // Applying shading to Batmen's head

ctx.arc(200, 75, 50, 0, Math.PI * 2);

ctx.fill();



// Adding some shading to Joker

ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; // Setting the color for shading to transparent black

ctx.fillRect(250, 100, 100, 200); // Applying shading to Joker's body

ctx.beginPath(); // Applying shading to Joker's head

ctx.arc(300, 75, 50, 0, Math.PI * 2);

ctx.fill();



// All done! Now we have Batmen facing off against Joker in an epic showdown!

// Let the battle of the heroes and villains begin!