How to create hyper link on the canvas in HTML5

Directly you can’t create the link on the canvas but you can write a text and can detect the click on this text and then you can use the window.location property.

The <canvas> element is used only to draw graphics. For it, Canvas has several methods for drawing paths, boxes, circles, text, and adding images. It can’t hold the any element such as <a> so that we have to do some extra work for writing a text that will behaves like hyperlink. This is very easy to do. See below:

The fillText() method draws filled text on the canvas.

Example

In the following html page you can find the JavaScript and html code to do this:

<html>
<head>
    <script>
        var canvas, ctx;
        var linkText = "Authorcode";
        var linkURL = "http://www.authorcode.com";
        var linkX = 50;
        var linkY = 25;
        var linkHeight = 15;
        var linkWidth;
        var isLink = false;
 
 
        function drawHyperLink() {
            canvas = document.getElementById("myCanvas");
            // check if supported
            if (canvas.getContext) {
                ctx = canvas.getContext("2d");
                ctx.font = linkHeight + 'px sans-serif';
                ctx.fillStyle = "#0000ff";
                ctx.fillText(linkText, linkX, linkY);
                linkWidth = ctx.measureText(linkText).width;
 
                canvas.addEventListener("mousemove", CanvasMouseMove, false);
                canvas.addEventListener("click", Link_click, false);
            }
        }
        function CanvasMouseMove(e) {
            var x, y;
            if (e.layerX || e.layerX == 0) { // for firefox
                x = e.layerX;
                y = e.layerY;
            }
            x -= canvas.offsetLeft;
            y -= canvas.offsetTop;
 
            if (x >= linkX && x <= (linkX + linkWidth) 
                    && y <= linkY && y >= (linkY - linkHeight)) {
                document.body.style.cursor = "pointer";
                isLink = true;
            }
            else {
                document.body.style.cursor = "";
                isLink = false;
            }
        }
 
        function Link_click(e) {
            if (isLink) {
                window.location = linkText;
            }
        }
    </script>
 
</head>
<body onload="drawHyperLink()">
    <center>
        <canvas id="myCanvas" width="200" height="200" 
        style="border-style: solid; border-width: 1px">
                   Canvas not supported.</canvas>
    </center>
</body>
</html>

Code Summery

In the above example, first we declare variables in JavaScript to specify the link text and its hyper link URL, height of the text and x,y co-ordinates for drawing. We draw the text on onload() event of the page. See drawHyperLink() function in above. We create two event handlers for the canvas.

The CanvasMouseMove() function get the X, Y of the mouse over the canvas by subtracting the window mouse location from the canvas page offset. If mouse over the text we set the isLink = true otherwise set to false. On the canvas click first we check that the isLink is true or not if isLink is true, we can use window.location = “your url”;

2 thoughts on “How to create hyper link on the canvas in HTML5”

  2. function Link_click(e) {

    if (isLink) {

    window.location = linkText;

    }

    linkText should be changed to linkURL

Comments are closed.