How to copy a kineticjs stage to another canvas

Question

I am writing an app where there may be hundreds of canvasses on a page. Rather than having the overhead of an individual stage for each canvas, I decided to have an editor that holds a stage. Once editing is completed it should copy the stage content to another canvas.

Stage offers toImage and toDataURL to get hold of the content however according this performance test, both those methods will be very slow compared to context.drawImage.

See: http://jsperf.com/copying-a-canvas-element

Since I only use one layer in a stage and a layer holds a canvas, I thought I could do this:

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

unfortunately that doesn't produce any results (It does run though)

Since a stage has a bufferCanvas I also tried:

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

Again no results although I can see the content on the stage canvas on the page.

However if I dig down in my page to get to the actual canvas created and used by kineticjs:

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

I do get results. What is the proper way to copy kineticjs stage content to another canvas?

Answer 1

access a layer canvas element like this:

var canvasElement = layer.getCanvas().getElement();

and the context like this:

var context = layer.getCanvas().getContext();

Here's the docs of interest:

http://kineticjs.com/docs/Kinetic.Layer.html#getCanvas

http://kineticjs.com/docs/Kinetic.Canvas.html

Answer 2

With the last and newer version of kineticjs the method from the as correct marked answer doesn't work anymore. Nowadays I just used the following approach to get the kineticjs main canvas - with the help of jquery:

var canvas = $('#canvasDiv').find('canvas');
console.log("Canvas: %O", layerCanvas);

Just replace

 #canvasDiv

with the ID of your container.