Write the javascript part in the head section of the html page.

<script>
    var Links = new Array(); // Links information
    function Draw_Rectangle(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor, text) {
        var Context2d = Canvas.getContext('2d');
        if (Context2d) {
            //Draw Rectangle
            Context2d.strokeStyle = Line_Color;
            Context2d.lineWidth = LINE_WIDTH;
            Context2d.fillStyle = FillColor;
            Context2d.fillRect(Left_Position, Top_Position, Width, Height);
            Context2d.strokeRect(Left_Position, Top_Position, Width, Height);
            //Add Text to Rectangle
            Context2d.textBaseline = 'middle';
            Context2d.font = '8px Arial';
            Context2d.fillStyle = 'white';
            var textX = Left_Position + Width / 2 - Context2d.measureText(text).width / 2;
            var textY = Top_Position + Height / 2;
            Context2d.fillText(text, textX, textY);
            //Create links in HTML Canvas
            Context2d.beginPath();
            var linkWidth = Context2d.measureText(text).width;
            var linkHeight = parseInt(Context2d.font); // Get lineheight out of fontsize
            Context2d.moveTo(textX, textY + linkHeight);
            Context2d.lineTo(textX + linkWidth, textY + linkHeight);
            Context2d.lineWidth = 1;
            Context2d.strokeStyle = "#000000";
            Context2d.stroke();

            Canvas.addEventListener("mousemove", on_mousemove, false);
            Canvas.addEventListener("click", on_click, false);

            // Add link params to array
            Links.push(textX + ";" + textY + ";" + linkWidth + ";" + linkHeight + ";" + text + ";" + "http://www.codesolution.org/");
        }
    }

    // Link hover
    function on_mousemove(ev) {
        var x, y;

        // Get the mouse position relative to the canvas element
        if (ev.layerX || ev.layerX == 0) { // For Firefox
            x = ev.layerX;
            y = ev.layerY;
        }

        // Link hover
        for (var i = Links.length - 1; i >= 0; i--) {
            var params = new Array();

            // Get link params back from array
            params = Links[i].split(";");
            var linkX = parseInt(params[0]),
                linkY = parseInt(params[1]),
                linkWidth = parseInt(params[2]),
                linkHeight = parseInt(params[3]),
                text = params[4],
                linkHref = params[5];

            // Check if cursor is in the link area
            if (x >= linkX && x <= (linkX + linkWidth) && y >= linkY && y <= (linkY + linkHeight)) {
                document.body.style.cursor = "pointer";
                hoverLink = linkHref;
                break;
            }
            else {
                document.body.style.cursor = "";
                hoverLink = "";
            }
        };
    }

    // Link click
    function on_click(e) {
        if (hoverLink) {
            window.open(hoverLink);
        }
    }
</script>

Write the html part in the body section of the html page.

<canvas id='Canvas' width='500' height='500'></canvas>
<script>Draw_Rectangle(Canvas, 100, 100, 100, 50, '#FFFFFF', 1, '#6ed629', 'CodeSolution.org');</script>

HTML5 Canvas Rectangle With Text Hyperlink