Kinetic.js “Object has no method batchDraw”

Question

I'm trying to set up a basic Kinetic.js application. I keep getting strange errors all over the place, and there are hardly any references for Kinetic.

$(document).ready(function ()
{    
    var stage = new Kinetic.Stage({
        container: 'canvas',
        width: 700,
        height: 434
    });

    var cursorCanvas = new Kinetic.Layer();
    var drawingCanvas = new Kinetic.Layer();

    var outerCircle = new Kinetic.Circle({
        radius: settings.size,
        strokeWidth: 4,
        stroke: "#000"
    });

    var innerCircle = new Kinetic.Circle({
        radius: settings.size,
        strokeWidth: 2,
        stroke: "#fff"
    });

    $(stage.getContent()).on('mousemove', function (e)
    {
        var pos = stage.getMousePosition();
        outerCircle.setAbsolutePosition(pos.x,pos.y);
        innerCircle.setAbsolutePosition(pos.x,pos.y);
        cursorCanvas.batchDraw(); //This throws an error
    }); 

    cursorCanvas.add(outerCircle);
    cursorCanvas.add(innerCircle);

    stage.add(cursorCanvas);
});

Uncaught TypeError: Object # has no method 'batchDraw'

Also, whenever I try to add a second layer to my stage: stage.add(drawingCanvas); stage.add(cursorCanvas);

I get

Uncaught TypeError: Type error kinetic.min.js:28

Any help? :)

Answer 1

Your error looks like Kinetic expects to concatenate a "#" with the id of an element to locate that element with JQuery--only to find that id isn't available.

Try setting your event handler to

stage.on('contentMousemove', function (e)
{
    //Stuff
});