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

Answer 2

1. First create an Image Element & give the Image source as the cached .DataURL() source

2. Using the Image <img /> (which we created earlier) draw the Image Content onto second Canvas element

E.g.:

window.onload = function() { 
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var ctx1    = canvas1.getContext('2d');
    var ctx2    = canvas2.getContext('2d');

    var src     = canvas.toDataURL("image/png"); // cache the image data source

    var img     = document.createElement('img'); // create a Image Element
    img.src     = src;   //image source

    ctx2.drawImage(img, 0, 0);  // drawing image onto second canvas element
};