fahd.blog: HTML5 - Adding Links to a Canvas

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

fahd.blog

Saturday, June 11, 2011

HTML5 - Adding Links to a Canvas

No comments:

Post a Comment