How to show a border around an image in kineticjs v4.0.5

By default, Kineticjsv4.0.5 does not support image border, therefore .showBorder() and .hideBorder() would result in error saying

Uncaught TypeError: Object # has no method 'showBorder'

But when I included the Image Plugin v1.0.1 javascript file, my game did not appear at all while FireBug reported no errors at all.

I have also started an issue on github.

Regards,

Solution

Try this code

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script>

    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

        var imageObj = new Image();
        imageObj.onload = function() {
            var yoda = new Kinetic.Image({
            x: 140,
            y: stage.getHeight() / 2 - 59,
            image: imageObj,
            width: 106,
            height: 118,
            stroke:"Red",
            strokeWidth:5
          });

          // add the shape to the layer
          layer.add(yoda);         

          // add the layer to the stage
          stage.add(layer);
          yoda.on('mouseover', function() {
                yoda.setStrokeWidth("Transparent");
                yoda.setStroke(0);
                layer.draw();
            });
        };
        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
      };    
    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>