Is there a way to clone a canvas element when using excanvas?

Question

I'm looking for a way to clone a canvas element. Based on this question I tried something like this, which worked:

var canvasContext = $("#canvas1")[0].getContext("2d");
canvasImageData = canvasContext.getImageData(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);
$("#canvas2")[0].getContext("2d").putImageData(canvasImageData, 0, 0);

However, I also need support for IE8 and below. I'm using excanvas, which does not support the image data methods.

Is there another way to achieve this when using excanvas?

Answer 1

You're out of luck, sorry.

The only other way would be to use `drawImage, since you can draw one canvas to another using it.

But that particular function of drawImage is not be supported since there is no "real" canvas to draw in the first place (just a bunch of VML that is pretending to look like a canvas). There's a request for that feature here:

http://code.google.com/p/explorercanvas/issues/detail?id=92

But its extremely unlikely that it will ever make it in to excanvas. Excanvas hasn't been updated since Mar 20, 2010. I'd strongly suggest you consider moving to full-on SVG/VML instead of canvas or dropping support for IE8.

Answer 2

Try saving the content excanv.getContext('2d').element_.innerHTML. If you reuse it, you will have cloned the context paths contents.

Example Code:

var excanv=G_vmlCanvasManager.initElement(node);

//do your graphing with excanv's context ....etc.

var excanv2=G_vmlCanvasManager.initElement(node2); excanv2.getContext('2d').element_.innerHTML=excanv.getContext('2d').element_.innerHTML;