Detect mouseover and show tooltip text for dots on an HTML Canvas
- by carl asquith
Ive recently created a "map" although not very sophisticated (im working on it) it has the basic function and is generally heading in the right direction.
If you look at it you can see a tiny red dots and on those tiny red dots i want to mouseover it and see text basically but ive had a bit of trouble getting the code right.
http://hummingbird2.x10.mx/website%20creation/mainpage.htm
This is all the code so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oynx Warrior</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<h1>Oynx Warrior</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#red";
cxt.beginPath();
cxt.arc(50,50,1,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
