How to use canvas getImageData() and putImageData() to copy a section of the canvas and paste it at another position?

Question

It appears simple, but it is doing my head in.

What I want to accomplish is this:

• Load an image from a file and place it on a specific position (not 0,0) on the canvas. This is being done properly, without any issue.

• Copy that part of the canvas (the canvas has other drawings on it, which do not need to be copied) and put it on another location, too, so that there are two copies of the same image data on the canvas. This part is where I am stuck at.

My current code looks like this:

<script type="text/javascript">
    var obj=document.getElementById("test"), img=document.getElementById("testimg");
    //obj is the canvas object and img is an image object

    var cvs=obj.getContext("2d"), imgdata;
    //getting ready to draw

    cvs.fillStyle="#006060";

    sym(lambda,50,50,cvs);
    //this is an external function, which draws a small image on the canvas by putting its pixels, one by one, on the canvas

    img.onload=function(){
        cvs.drawImage(img,150,150);
        }
    //drawing the image loaded from file with <img /> on to the canvas

    imgdata=cvs.getImageData(150,150,18,18);
    //copying the part of image we need (this is the image we put on canvas from the file). its dimensions are 18 x 18

    cvs.putImageData(imgdata,100,100);
    //trying to put the image on location (100,100) on the canvas. this is where it is failing me
</script>

What am I doing wrong here? How is it supposed to be done?

w3schools website has a very tidy and short example of getImageData() and putImageData() on their try yourself page. When I try to copy this procedure for my own use, it all falls apart.

Where am I wrong?