Display canvas image from one canvas to another canvas using base64

Question

E.g. var new = canvas.toDataURL(\"image/png\");

I want the base64 that is present in this new variable to be displayed into 2nd canvas element that is p

Answer 1

You shouldn't use base64 to copy the canvas. You can pass the source canvas into the destination canvas' context method, drawImage.

Otherwise you will suffer a serious performance hit. See my jsperf test at http://jsperf.com/copying-a-canvas-element.

drawImage() will accept a Canvas as well as an Image object.

Try this:

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);