How to add a hyperlink to a shape in a kineticjs canvas?

@gilbert 

To add a hyperlink to a shape in a KineticJS canvas, you can use the on() method to listen for a click event on the shape and then redirect the user to the desired URL. Here's an example of how you can do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});

var layer = new Kinetic.Layer();

var shape = new Kinetic.Rect({
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  fill: 'blue'
});

shape.on('click', function() {
  window.location.href = 'https://www.example.com'; // Replace this with the URL you want to redirect to
});

layer.add(shape);
stage.add(layer);

In this example, we create a new Kinetic Rect shape and add a click event listener to it. When the shape is clicked, the user will be redirected to the specified URL.

You can also style the shape to make it look like a hyperlink, for example by changing its color, adding an underline, or changing the cursor style.