How to use Data URI to copy canvas as image or another canvas

Question 1

You've almost got it.

enter image description here

Since you’re generating a second image object (var image), you must also do a second onload:

  var imageObj = new Image();
  imageObj.onload = function(){

      ...

      var image = new Image();
      image.onload=function(){

          ...

      }
      image.src=canvas.toDataURL(); // .png is the default


  };
  imageObj.crossOrigin="anonymous";
  imageObj.src=imageURI;

Also, you have a context.save in there without a context.restore (usually they are paired).

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ne4Up/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
    img{border:1px solid blue;}
</style>

<script>
$(function(){

    var lat="lat";
    var lon="long";

    onPhotoURISuccess("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png");

    function onPhotoURISuccess(imageURI) {

            var largeImage = document.getElementById('testImage'); //image object

            var canvas = document.getElementById('canvasPnl');// source canvas
            var context= canvas.getContext("2d");
            var imageObj = new Image();
            imageObj.onload = function(){
                context.drawImage(imageObj,0,0,100,100 );
                context.fillStyle="#FFFFFF";
                context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
                context.fillText(new Date(), 0, 20);


    //            context.save(); // where's the matching context.restore();


                var image = new Image();
                image.onload=function(){
                    var canvas2 = document.getElementById('canvasPnl2');//destination canvas
                    var context2= canvas2.getContext("2d");
                    context2.drawImage(image,0,0);
                    largeImage.src=canvas2.toDataURL();
                }
                image.src=canvas.toDataURL(); // .png is the default


            };
            imageObj.crossOrigin="anonymous";
            imageObj.src=imageURI;


    }        

}); // end $(function(){});
</script>

</head>

<body>
    <p>Pnl</p>
    <canvas id="canvasPnl" width=100 height=100></canvas>
    <p>Pnl2</p>
    <canvas id="canvasPnl2" width=100 height=100></canvas>
    <p>testImage</p>
    <img id=testImage src="houseicon.png" width=100 height=100 >
</body>
</html>

Question 2

If you simply want to draw a canvas onto another canvas there is no need to convert it to image first. Just use the source canvas directly as an argument to drawImage:

context2.drawImage(canvas, 0, 0);

If you absolutely want to convert it to image first you only need to modify a few lines to handle the asynchronous nature of image loading:

var img_uri= canvas.toDataURL("image/png");
var image = new Image();
var canvas2;    /// put them here so they are available outside onload below
var context2;

/// put it in a onload here as well
image.onload = function() {
    canvas2 = document.getElementById('canvasPnl2');//destination canvas
    context2= canvas2.getContext("2d");
    context2.drawImage(image,0,0);
}

image.src =img_uri;

A small note: some versions of Chrome has a bug with new Image. For this reason consider using document.createElement('image') instead.