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

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

2. Using the Image (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
};