Create links in HTML canvas

Is it possible to create html links out of text that is rendered in a canvas element?

Solution

There is no easy way. You will have to draw the link text onto the canvas and then check for mouseclicks. Here is a demo html page:

var canvas = document.getElementById("myCanvas");
var ctx;
var linkText = "https://stackoverflow.com";
var linkX = 5;
var linkY = 15;
var linkHeight = 10;
var linkWidth;
var inLink = false;

// draw the balls on the canvas
function draw() {
  canvas = document.getElementById("myCanvas");
  // check if supported
  if (canvas.getContext) {

    ctx = canvas.getContext("2d");

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //draw the link
    ctx.font = '10px sans-serif';
    ctx.fillStyle = "#0000ff";
    ctx.fillText(linkText, linkX, linkY);
    linkWidth = ctx.measureText(linkText).width;

    //add mouse listeners
    canvas.addEventListener("mousemove", on_mousemove, false);
    canvas.addEventListener("click", on_click, false);

  }
}

//check if the mouse is over the link and change cursor style
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;
  }
  x -= canvas.offsetLeft;
  y -= canvas.offsetTop;

  //is the mouse over the link?
  if (x >= linkX && x <= (linkX + linkWidth) && y <= linkY && y >= (linkY - linkHeight)) {
    document.body.style.cursor = "pointer";
    inLink = true;
  } else {
    document.body.style.cursor = "";
    inLink = false;
  }
}

//if the link has been clicked, go to link
function on_click(e) {
  if (inLink) {
    window.location = linkText;
  }
}

<html>

<body onload="draw()">
  <center>
    <canvas id="myCanvas" width="200" height="200" style="border-style:solid;border-width:1px">Canvas not supported.</canvas>
  </center>
</body>

</html>