Solved

html5 canvas link

Posted on 2012-12-28
7
186 Views
Last Modified: 2013-01-09
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

0
Comment
Question by:prostang
  • 4
  • 3
7 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38729194
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)))
0
 

Author Comment

by:prostang
ID: 38729502
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?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38729637
Not seeing any problem in Chrome. I'm using version 23 on a Mac. I can post my complete test if it would help.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:prostang
ID: 38741370
Tommyboy:  can you please post your test?  I haven't visited the issue due to the holidays.  Thanks.
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 38742530
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

0
 

Author Closing Comment

by:prostang
ID: 38760227
Thanks TommyBoy for the help on this.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38760964
No Problem. Thanks for the points.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
multiple selects 23 62
How to create a slidershow with the use of the property cover in css 15 64
email validation 9 47
Text too large in Chrome 17 56
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question