Kinetic JS not working from external script file?

Question

So I want manipulate canvas, but Kinetic JS doesn't seem to work, don't know why.

This code is from a tutorial:

$(function(){
      var stage = new Kinetic.Stage({
        container: 'gridalea',
        width: 172,
        height: 720
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      });

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

      // add the layer to the stage
      stage.add(layer);
});

this is in a tone.js file inside a js folder.

here is my html head:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script src="js/kinetic-v4.7.4.min.js"></script>
<script src="js/tone.js"></script>

and the canvas inside the body, the child of some divs.

<canvas id="gridalea" width="175px" height="720px">Your browser does not support canvas.</canvas>

I don't see what is wrong with it. I have all the files correctly where they should be, no errors in Firebug. Can you help me somehow?

EDIT: I tried to get the values of variables in Firebug, they are not defined.

actual_kangaroo · Answer 1 · 2013-12-01T09:32:27.990

2

it looks like they used a div as the container rather than a canvas. Try this:

<div id="gridalea" width="175px" height="720px"></div>

edited Dec 01 '13 at 09:32

answered Dec 01 '13 at 09:19

actual_kangaroo

5,971
2
31
45

hehe I would have assumed they'd use a canvas also – actual_kangaroo Dec 01 '13 at 09:32

score 0 · Answer 2 · answered Dec 01 '13 at 09:34

0

I had to change <canvas> to <div> because Kinetic JS works with div containers and, also I had to add defer="defer" to my script tag

answered Dec 01 '13 at 09:34

godzsa

2,105
4
34
56

Did you get rectangle with those dimensions for stage area? I had to increase `width` to get rectangle on the screen. – Anto Jurković Dec 01 '13 at 09:49
I deleted x and y property – godzsa Dec 01 '13 at 11:22

Kinetic JS not working from external script file?

2 Answers2