How do I add a hyperlink to a shape in a KineticJS canvas?

Question

I'm working on my homepage which consists of several shapes being drawn in the middle of the screen using an HTML5 canvas and KineticJS, but I've run into a roadblock trying to add hyperlinks to each of the shapes. My code thus far (which doesn't work) is:

midHexPoly.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
      });

midHexPoly.on('mouseout', function() {
        document.body.style.cursor = 'default';
      }); //this works, the mouse changes to a pointer on 
          //mouseover, and back on mouseout

var linkTest = "http://www.google.com"
midHexPoly.on('click', function() {
    window.open = linkTest;
});

After much googling, I can't seem to find any resolutions to this issue, and there doesn't seem to be a function in Kintetic for redirecting or adding hyperlinks.
Is there any way to fix this? Thanks!

Answer 1

window.open is a method, so you should call it like so: window.open(linkTest); . You'll find more info, such as its arguments on w3schools . I suggest using the second argument (name) to make sure all links will open in the same new window.

If however you want to open all links in the same window as your homepage, you could use this piece of code instead of window.open : location.assign(linkText); .

If those don't work, make sure the click event is fired by adding a console log inside your callback function, eg

midHexPoly.on('click', function() {
    console.log('clicked on midHexPoly');
});

or

midHexPoly.on('click', function() {
    alert('clicked on midHexPoly');
});