Jquery Image Lens - Kinetic JS image id

Question

I am trying to use jquery image lens on Kinetic JS canvas http://jsfiddle.net/user373721/7f8qM/15/. The challenge I have is how to find the id of the image in the canvas, I tried:

  myImage.onload = function () {
            var yoda = new Kinetic.Image({
                x: 0,
                y: 0,
                image: myImage,
                width: 400,
                height: 400,
                id: 'thumb'
            });
            layer.add(yoda);
            layer.draw();
        };
        myImage.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
        $('#thumb').imageLens({ lensSize: 200 }); 

Had no luck, I would appreciate your suggestions, thanks in advance.

Answer 1

It is not posible to use kineticjs and imageLens as you are trying. Very different techniques.

So you have such ways:

1. Don't use kineticjs. Work only with DOM images.
2. Convert kineticjs objects to image http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-caching-with-kineticjs/ then insert the image to DOM and then use imageLens.

Answer 2

kinetic js objects are not inserted in the DOM. The correct way to access an object using the id is via the stage object.

var th = stage.get('#thumb');