KineticJS: How do I init an Image from a Canvas?

Question

I have a canvas element

var canvas; // some canvas

which contains an image.

Is it possible to init a KineticJS Image from a canvas element? If not how would I get the KineticJS image from a canvas the fastest way?

Answer 1

Sure!

You can use the canvas element as a source for a KineticJS.Image:

var canvas=document.getElementById("myCanvas");  // or createElement

...  // do stuff on the canvas element

var image1 = new Kinetic.Image({
    x:40,
    y:40,
    image:canvas,
});
layer.add(image1);
layer.draw();