kineticjs “cannot call method 'appendChild' of undefined”

Question

I am only starting to use kineticJS but I am getting some errors after following This tutorial

I don't understand why but I am getting an exception from inside the KineticJS file:

"Uncaught TypeError: cannot call method 'appendChild' of undefined".

When I do a step by step alert()s, I see that it stops after

var stage = new Kinetic.Stage("rightSide", 578, 200);

but I most definitively have:

<canvas id="rightSide">
</canvas>

I also tried:

<div id="rightSide">
</div>

and I am getting the same error.

Thanks.

Edit: in response to the comments below, this is Copy-Paste from the tutorial:

</head>
<body>
<div id="container">
</div>
</body>

Solution

Thus @Gleeb 's own answer reflects current practice in KineticJS v4.0.x instead of those docs / tutorials made in the early v3 era.

Should make a pull request for backward compatibility.. something like

if(arguments.length>1){
 config.container =  arguments[0];
 config.width = arguments[1];
 config.height = arguments[2];
}

... in the Stage constructor.

OTHER TIPS

the problem was with the actual creation of the stage.

instead of

var stage = new Kinetic.Stage("container", 578, 200);

i did

var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });

Try to run your script at the window.onload event (as in the example) and use console.log() to debug your variables/objects.

window.onload = function() {
  var stage = new Kinetic.Stage("rightSide", 578, 200);
  console.log('stage =', stage); // DEBUG
};

...and use the div and not the canvas.

<div id="rightSide"></div>

You´ll find more tutorials and the official API documentation at http://www.kineticjs.com/docs/symbols/Kinetic.Stage.php

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow