html - 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 present. But it does not display the base64 image using drawimage method. It works if I use say image.png

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);