Solved

html5 canvas link

Posted on 2012-12-28

HTML

2 solutions

187 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

Comment

Question by:prostang

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

7 Comments

LVL 38

Accepted Solution

by:Tom Beck

Tom Beck earned 500 total points

ID: 387291942012-12-29

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)))

Author Comment

by:prostang

ID: 387295022012-12-29

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?

LVL 38

Expert Comment

by:Tom Beck

ID: 387296372012-12-29

Not seeing any problem in Chrome. I'm using version 23 on a Mac. I can post my complete test if it would help.

Author Comment

by:prostang

ID: 387413702013-01-03

Tommyboy: can you please post your test? I haven't visited the issue due to the holidays. Thanks.

LVL 38

Assisted Solution

by:Tom Beck

Tom Beck earned 500 total points

ID: 387425302013-01-03

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

Author Closing Comment

by:prostang

ID: 387602272013-01-09

Thanks TommyBoy for the help on this.

LVL 38

Expert Comment

by:Tom Beck

ID: 387609642013-01-09

No Problem. Thanks for the points.

Featured Post

Question has a verified solution.

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

Suggested Solutions

Title	# Comments	Views	Activity
Adding a countdown to HTA	12	114	2017-04-04
JQuery conflicts/syntax issue	4	32	2017-04-05
Increase image taller on inner pages	2	52	2017-04-21
Boolean	13	51	2017-04-25

Unicode, UTF-8, and Multibyte in Plain English

Article by: gr8gonzo

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.

Easy Methods to Remove Duplicate Emails in Outlook!

Article by: Jane

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…

Creating Scalable Full-Width Header in CSS3

Video by: Sarah

In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.: Create a new div and name it Header. Position it with position:absolute at the top…

HTML
CSS

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…