troubleshooting Question

html5 canvas link

Avatar of prostang
prostangFlag for United States of America asked on
HTML
7 Comments2 Solutions235 ViewsLast Modified:
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;
  }
}
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 2 Answers and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros