Editable Beetle Drawing Code

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Beetle Drawing
function drawBeetle() {
    // Center the drawing on the canvas
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    ctx.translate(centerX, centerY); // Move the origin to the center of the canvas

// Pincers
    ctx.lineWidth = 8.7;
    ctx.lineCap = "round"; // Set the line cap to round for rounded ends
    ctx.fillStyle = "#202020"; // Set pincer color
    ctx.strokeStyle = "#202020"; // Set pincer outline color
    ctx.beginPath();
    ctx.moveTo(50, 45);
    ctx.moveTo(50, 25);
    ctx.bezierCurveTo(75, 20, 75, 20, 100, 0);
    ctx.closePath();
    ctx.stroke();

// Body
    ctx.fillStyle = "#8f5db0"; // Set body color
    ctx.strokeStyle = "#764b90"; // Body outline color
    const pathData = "M46.3219 0c0 21.7437-17.422 33.3645-46.3219 33.3645S-46.3219 21.7437-46.3219 0-28.8999-33.3645-0-33.3645 46.3219-21.7437 46.3219 0z";
    
    // Create a Path2D object from the SVG path data
    const path = new Path2D(pathData);
    // Set the fill color and draw the path
    ctx.fill(path); // Set the outline width, adjust as needed
    ctx.stroke(path);

// Draw the body line
    ctx.moveTo(-20, 0);
    ctx.lineTo(20, 0);
    ctx.stroke();

ctx.lineWidth = 6;

// Draw body details (dots)
    for (let i = 0; i < 3 * 2; i++) {
        const x = ((i % 1.5 + 1) * 30) - 45;
        const y = (Math.floor(i / 3 + 1) * 30) - 45;

ctx.strokeStyle = "#764b90"; // body outline color
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, 2 * Math.PI);
        ctx.fillStyle = "#764b90"; // Body dot color
        ctx.fill();
        ctx.stroke();
    }

// Reset the transformation (optional, if you want to avoid future translations)
    ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset to the default transformation
}

drawBeetle();