Copied from the cache sample on kinetic JS
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(); } });