Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.
Solved
html5 canvas link
Posted on 2012-12-28
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;
}
}
[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
4-
3
7 Comments
Active today
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)))
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)))
Active 4 days ago
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?
Active today
Not seeing any problem in Chrome. I'm using version 23 on a Mac. I can post my complete test if it would help.
Active 4 days ago
Tommyboy: can you please post your test? I haven't visited the issue due to the holidays. Thanks.
Active today
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>
Featured Post
Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS
Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5.
Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display
(CODE)
HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses
Course of the Month11 days, 4 hours left to enroll
718 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.