Saturday, June 11, 2011

HTML5 - Adding Links to a Canvas

There is no easy way to create links on an HTML5 Canvas. It would be nice if there was, but you have to do it all manually. First draw the link text and then listen to mouse move and mouse click events. When the mouse moves over your link, you need to change the cursor to a "hand" and when the mouse clicks on your link you need to make the browser go to that page.

Here is a demo html page. Save the code to a file and open it in Firefox:

<html>
 <head>
  <script type="text/javascript">

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

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) { //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()">
  <canvas id="myCanvas" width="150" height="200">Canvas not supported.</canvas>
 </body>
</html>
Related Posts:
HTML5 Canvas - Bouncing Balls

4 comments:

  1. Developed using HTML Canvas, the user interface consisted of an aesthetically pleasing game-skill like tree structure to show degree progress.
    Thanks
    canvas library

    ReplyDelete
  2. This information is very useful. thank you for sharing. and I will also share information about health through the website

    obat kesehatan mata
    Obat nyeri Tenggorokan
    Cara Mengobati telapak kaki Berlubang
    obat sakit dada
    Pengobatan Alami Keputihan
    Obat sariawan

    ReplyDelete
  3. This information is very useful. thank you for sharing. and I will also share information about health through the website

    Cara Mudah Mengobati Diabetes
    Obat Gondongan/Gondok Beracun
    Obat Susah Kencing
    Solusi atasi Vertigo
    Penyebab Mual dan BAB berdarah
    Obat nyeri Tenggorokan

    ReplyDelete