// Get the canvas element and its context
    var canvas = document.getElementById("jhdcanvas");
    var ctx = canvas.getContext("2d");

    // Create a color gradient (from top to bottom)
    var gradient = ctx.createLinearGradient(0, 0, 0, 450);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.5, 'orange');
    gradient.addColorStop(1, 'yellow');

    // Start drawing the left half of section 3, adjusted to be at the edge of the canvas
    ctx.beginPath();
    ctx.moveTo(20, 225); // Start at the top left edge of section 3
    ctx.bezierCurveTo(-5, 250, -10, 325, 40, 350); // Left vertical curve hugging the left edge
    ctx.lineTo(75, 300); // Middle connection to section 13
    ctx.bezierCurveTo(75, 300, 40, 290, 65, 270, 200, 290);
    //ctx.lineTo(50, 200); // Continue up
    ctx.lineTo(20, 225); // Complete the half

    // Fill with the gradient
    ctx.fillStyle = gradient;
    ctx.fill();

    //Optionally, add a stroke to the shape's outline
    //ctx.lineWidth = 2;
    //ctx.strokeStyle = "#000000";
    //ctx.stroke();