html5 canvas link

prostang
prostang used Ask the Experts™
on
I have a site that I am creating a header using a canvas.  I am doing some testing and cannot get the "link" to work.  I am attaching the code that is in a linked .js file.  I am not getting the pointer when I hover over the link text and not getting the link function.  Thanks in advance.

// JavaScript Document

 function loadHeader() {
//var theCanvas = document.getElementById('Canvas1');
var linkText="http://mjmco.com";
var linkX=750;
var linkY=175;
var linkHeight=25;
var linkWidth=100;
var inLink = false;

   var theCanvas = document.getElementById('Canvas1');
		if (theCanvas && theCanvas.getContext) {
			var ctx = theCanvas.getContext("2d");
			if (ctx) {
				//clear canvas
				ctx.clearRect(0,0,theCanvas.width,theCanvas.height);
				ctx.drawImage (headerBG, 0, 0);
				
				//draw the link
    			ctx.font='15px sans-serif';
			    ctx.fillStyle = "#0000ff";
			    ctx.fillText(linkText,linkX,linkY);
			    linkWidth=ctx.measureText(linkText).width;
				ctx.fillText(linkWidth,700,175)
	
				 //add mouse listeners
    			theCanvas.addEventListener("mousemove", on_mousemove, false);
			    theCanvas.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-=theCanvas.offsetLeft;
  y-=theCanvas.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;
  }
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
Top Expert 2015
Commented:
The variables currently declared inside the loadHeader function need to be declared outside the function instead to make them global in scope so references to them inside the on_mousemove and on_click functions work properly. Otherwise, the link works fine in my testing (with the if/else conditional in the on_mousemove un-commented).

On a side note, since text is drawn around the center point provided, this would be a more accurate conditional to fine out whether the mouse is over the link:

if(x >= (linkX - (linkWidth/2)) && x <= (linkX + (linkWidth/2)) && y <= linkY  && y >= (linkY-(linkHeight/2)))
prostang

Author

Commented:
After some fiddling with the other aspects of the page, I found that another piece of script that I have for a flash element is blocking the action.  I also found that the link works in Mozilla and IE, but not in Chrome.  Any ideas?
Tom Beck
Top Expert 2015

Commented:
Not seeing any problem in Chrome. I'm using version 23 on a Mac. I can post my complete test if it would help.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
prostang

Author

Commented:
Tommyboy:  can you please post your test?  I haven't visited the issue due to the holidays.  Thanks.
Tom Beck
Top Expert 2015
Commented:
Yep:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

</head>

<body onLoad="loadHeader()">
<canvas id="Canvas1" width="1000" height="500" style="border:1px solid red"></canvas>
<script type="text/javascript">
// JavaScript Document
var theCanvas, linkText, inLink;
var linkX=750;
var linkY=175;
var linkHeight=25;
var linkWidth=100;
function loadHeader() {
//var theCanvas = document.getElementById('Canvas1');
var headerBG = new Image();
headerBG.src = "images/BlueFish_2.jpg";
linkText="http://mjmco.com";

inLink = false;

   theCanvas = document.getElementById('Canvas1');
		if (theCanvas && theCanvas.getContext) {
			var ctx = theCanvas.getContext("2d");
			if (ctx) {
				//clear canvas
				ctx.clearRect(0,0,theCanvas.width,theCanvas.height);
				ctx.drawImage (headerBG, 0, 0);
				
				//draw the link
    			ctx.font='15px sans-serif';
			    ctx.fillStyle = "#0000ff";
			    ctx.fillText(linkText,700,175);
			    linkWidth=ctx.measureText(linkText).width;
				//ctx.fillText(linkWidth,700,190)
	
				 //add mouse listeners
    			theCanvas.addEventListener("mousemove", on_mousemove, false);
			    theCanvas.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-=theCanvas.offsetLeft;
  y-=theCanvas.offsetTop;

  //is the mouse over the link?
  if(x >= (linkX - (linkWidth/2)) && x <= (linkX + (linkWidth/2)) && y <= linkY  && y >= (linkY-(linkHeight/2))){
	  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>
</body>
</html>

Open in new window

prostang

Author

Commented:
Thanks TommyBoy for the help on this.
Tom Beck
Top Expert 2015

Commented:
No Problem. Thanks for the points.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial