Create links in HTML canvas

by

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:

<html>
<head>
<script type="text/javascript">
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;
  }
}
</script>
</head>
<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>

More Related Contents:

  1. Google Apps Script to open a URL
  2. Canvas width and height in HTML5
  3. Html5 canvas drawImage: how to apply antialiasing
  4. Linking a UNC / Network drive on an html page
  5. How can I convert an HTML element to a canvas element?
  6. How to pre-populate the sms body text via an html link
  7. Can I create links with ‘target=”_blank”‘ in Markdown?
  8. Drawing text to with @font-face does not work at the first time
  9. What’s the best way to set a single pixel in an HTML5 canvas?
  10. Add target=”_blank” in CSS
  11. How to change the opacity (alpha, transparency) of an element in a canvas element?
  12. How do I make a transparent canvas in html5?
  13. using HTML5 Canvas – rotate image about arbitrary point
  14. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  15. Can you take a “screenshot” of the page using Canvas?
  16. Link to a section of a webpage
  17. Is there a way to bookmark or link to a section of a page without an anchor?
  18. HTML5 Canvas getImageData and Same Origin Policy
  19. Animated GIF in HTML5 canvas
  20. how to make a cell of table hyperlink
  21. Insert a Link Using CSS
  22. Chart.js canvas resize
  23. HTML5 Canvas background image
  24. Placing a within a
  25. Combining two or more Canvas elements with some sort of blending
  26. Link to reload current page
  27. Subpixel anti-aliased text on HTML5’s canvas element
  28. How to navigate to a section of a page
  29. Draw SVG on HTML5 Canvas with support for font element
  30. How to open native iOS app (calendar, notes…) from a link on website?

Leave a Comment