Add Href to canvas element

Question

I am using HexagonTools to draw hexagon using canvas.

I need to add an href link to elements of canvas.

I have tried this code:

function drawHexGrid()
{
var linkText="http://stackoverflow.com";
var linkX=5;
var linkY=15;
var linkHeight=10;
var linkWidth;
var inLink = false;

    var grid = new HT.Grid(800, 600);
    var canvas = document.getElementById("hexCanvas");
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 800, 600);
    for(var h in grid.Hexes)
    {
        grid.Hexes[h].draw(ctx);
        linkWidth=ctx.measureText(linkText).width;          
             canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);

    }
}

But this is not working, I need a simple example on how to develop this, I have already looked at this SOF Question But I couldn't develop it

Answer 1

You can test which hexagon you mouse clicked using context.isPointInPath .

• Listen for mousedown events
• In mousedown, fetch the mouseX, mouseY
• Recreate each of your hex paths (no need to actually stroke/fill them).
• For each hex, use .isPointInPath(mouseX,mouseY) to see if the mouse clicked in this hex.
• If you find a clicked hex, use window.open(theUrl, '_blank') to navigate to its associated url.

In Hexagon Tools, each hex has a points property which you can use to receate each of your hex paths.

Here's example code and a Demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } var isDown=false; var startX,startY; var hexes=[]; hexes.push({ points:[{x:57.5,y:63},{x:42.5,y:63},{x:35,y:50},{x:42.5,y:37},{x:57.5,y:37},{x:65,y:50}], url:'http://stackoverflow.com', }); draw(); $("#canvas").mousedown(function(e){handleMouseDown(e);}); function draw(){ for(var i=0;i<hexes.length;i++){ var h=hexes[i]; ctx.beginPath(); ctx.moveTo(h.points[0].x,h.points[0].y); for(var j=1;j<h.points.length;j++){ ctx.lineTo(h.points[j].x,h.points[j].y); } ctx.closePath(); ctx.stroke(); } } function handleMouseDown(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); for(var i=0;i<hexes.length;i++){ var h=hexes[i]; ctx.beginPath(); ctx.moveTo(h.points[0].x,h.points[0].y); for(var j=1;j<h.points.length;j++){ ctx.lineTo(h.points[j].x,h.points[j].y); } ctx.closePath(); //if(ctx.isPointInPath(mouseX,mouseY)){ window.open(h.url, '_blank'); } if(ctx.isPointInPath(mouseX,mouseY)){ alert('Navigate to: '+h.url); } } } 

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Click in the hexagon to navigate to Stackoverflow.com</h4> <canvas id="canvas" width=300 height=300></canvas>