move image

<head>

    <title>Export and save the canvas as PNG</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

    <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>

    <script src="libs/export_canvas/base64.js" type="text/javascript"></script>
    <script src="libs/export_canvas/canvas2image.js" type="text/javascript"></script>

</head>

<script type="text/javascript">
    var canvas;
    var stage;

    /**
    * Init
    */
    function init() {

        canvas = document.getElementById("canvas");
        stage = new createjs.Stage(canvas);

        // Enable touch support
        if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage); }

        displayLabel();
        displaytemplate();
    }


    /**
    * Display Uplaoded Picture
    */
    displayLabel = function () {

        var image = new Image();


        // Invoked when the picture is loaded
        image.onload = function (event) {

            // Display Uplaoded Picture
            var upload = new createjs.Bitmap(event.target);

            upload.y = 50;
            upload.x = 170;
            upload.height = 50;
            upload.width = 50;
            stage.addChild(upload);
            stage.update();

            // Enable drag'n'drop on Picture
            enableDrag(upload)

        }
        image.src = "images/sample.jpg";

    }

    /**
    * Display Monalisa
    */
    displaytemplate = function () {

        var image = new Image();

        // Invoked when the picture is loaded
        image.onload = function (event) {

            // Display template
            var template = new createjs.Bitmap(event.target);
            stage.addChild(template);
            stage.update();

        }
        image.src = "images/2.png";
    }


    /**
    * Enable drag'n'drop on DisplayObjects
    */
    enableDrag = function (item) {

        // OnPress event handler
        item.onPress = function (evt) {

            var offset = { x: item.x - evt.stageX,
                y: item.y - evt.stageY
            };

            // Bring to front


            // Mouse Move event handler
            evt.onMouseMove = function (ev) {

                item.x = ev.stageX + offset.x;
                item.y = ev.stageY + offset.y;
                stage.update();
            }
        }
    }


    /**
    * Export and display the canvas as PNG in a new wind    ow
    */
    function exportAndView() {

        var screenshot = Canvas2Image.saveAsPNG(canvas, true);
        var win = window.open();
        $(win.document.body).html(screenshot);
    }

    function download() {

        var screenshot = Canvas2Image.saveAsPNG(canvas, true);
        window.location = canvas.toDataURL("image/png")
    }

    function to_image() {
        Canvas2Image.saveAsPNG(canvas);
    }

</script>

<!-- --------------------------------------------------------------------------------End of image script-->


<body onload="init()"  >


    <canvas  width="800" height="308" id="canvas">
    </canvas>

    <div style="position: relative" >
        <input type="button" value="View screenshot in a new page" onClick="exportAndView()" >
        <input type="button" value="View screenshot in a new page" onClick="download()" >
        <button onclick="to_image()">Draw to Image</button>
    </div>

</body>