const canvasWidth = 500;
const canvasHeight = 502;

// Get the canvas element
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Set color and line width
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;

// Draw the human shape
drawHuman(ctx);

// Get mouse events
canvas.addEventListener('mousemove', handleMouseMove);

// Function to draw the human and handle mouse events
function handleMouseMove(event) {
	// Get the mouse position relative to the canvas
	const x = event.clientX - canvas.getBoundingClientRect().left;
	const y = event.clientY - canvas.getBoundingClientRect().top;

	// Check which limb is being interacted with
	const lim = closestLimb(x, y, limbRadii);

	if (lim !== -1) {
		adjustAnimate(lim);
	}
}

// Function to adjust the human animation based on the limb being interacted with
function adjustAnimate(lim) {
	if (lim === 1) {
		// Arm 1
		drawArm1(ctx, x, y, lim);
		drawArm2(ctx, x, y, lim);
		drawArm3(ctx, x,