Page History

       var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var star = new Kinetic.Star({
        innerRadius: 20,
        outerRadius: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 5,
        numPoints: 5,
        x: 60,
        y: 60,
        draggable: true,
        shadowOffset: 5,
        shadowColor: 'black',
        shadowBlur: 5,
        shadowOpacity: 0.5
      });
      layer.add(star);
      stage.add(layer);
      // convert star node into a cached image
      star.toImage({
        // cached image will be 120 x 120
        width: 120,
        height: 120,
        /*
         * when star has been converted into an image,
         * use the image to instantiate image objects and
         * then add them to the layer
         */
        callback: function(img) {
          for(var n = 0; n < 10; n++) {
            var image = new Kinetic.Image({
              image: img,
              x: Math.random() * stage.getWidth(),
              y: Math.random() * stage.getHeight(),
              offset: 60,
              draggable: true
            });
            layer.add(image);
          }
          layer.draw();
        }
      });