Working with KineticJS and PreloadJS – preload images and display them on canvas

KineticJS is a great framework to manipulate canvas but when it comes to preload images for a project there’s no elegant way of doing this but creating your own code or using other¬†libraries (most of them are either incomplete or are not maintained). The one I’ve using for some time is PreloadJS¬†and since I am used to it I wanted to include it in my project to make things easier for me.


background-color: #222222;
width: 40px;
height: 40px;
<script src="kinetic-v5.0.1.min.js"></script>
</span><script src="preloadjs-0.4.1.min.js"></script>
<div id="container"></div>
<script src="app.js"></script>

app.js file

var layer, stage, assets, manifest, handleAssetsLoad;

//fire this function when preload is finished
handleAssetsLoad = function ( evt ) {

// get the image object from the assets
var imgObj = assets.getResult("image");

// create KineticJS Image
var test = new Kinetic.Image({
x: 0,
y: 0,
width: 40,
height: 40,
image: imgObj,

// add the shape to the layer

// add the layer to stage

// create the kineticjs stage
stage = new Kinetic.Stage({
container: "dungeoneer",
width: 40,
height: 40

layer = new Kinetic.Layer();

// which files to load
manifest = [
{id: "image", src: "image.jpg"}

//initialize PreloadJS
assets = new createjs.LoadQueue(true, "images/");
assets.on("complete", handleAssetsLoad);