var x = $("#crop_square").width();
        var y = $("#crop_square").height();


        var ty = $("#crop_square").offset().top - $("#area_c").offset().top;

        var tx = $("#crop_square").offset().left - $("#area_c").offset().left;


         var c =  document.getElementById("area_c");
         var ctx = c.getContext("2d");

         var imageData = ctx.getImageData(x, y, tx, ty); // this line not working

         var c2 =  document.getElementById("area_c2");
         var ctx2 = c2.getContext("2d");
         ctx2.putImageData(imageData, 0, 0);