troubleshooting Question

html5 canvas link

Avatar of prostang
prostangFlag for United States of America asked on
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="";
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.drawImage (headerBG, 0, 0);
				//draw the link
    			ctx.font='15px sans-serif';
			    ctx.fillStyle = "#0000ff";
				 //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;

  //is the mouse over the link?
//  if(x>=linkX && x <= (linkX + linkWidth) && y<=linkY && y>= (linkY-linkHeight)){ = "pointer";
//  }
//  else{
// = "";
//      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