Toggle Image Border

by jeykeu

HTML

<body>
    <h2><strong>Hover Yoda</strong></h2>
    <div id="container"></div>
  </body>

JavaScript

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:"transparent",
            strokeWidth:0
          });

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

          // add the layer to the stage
          stage.add(layer);
          yoda.on('mouseover', function() {
                yoda.setStrokeWidth(4);
                yoda.setStroke("red");
                layer.draw();
            });
             yoda.on('mouseout', function() {
                yoda.setStrokeWidth("0");
                yoda.setStroke("transparent");
                 layer.draw();
            });
        };
        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";