var canvas = null; //document.getElementById('canvas');

var ctx = null;

var rect = {};

var drag = false;

var imageObj = null;


var oAxis = {

    X: 0,

    Y: 0,

    Height: 0,

    Width: 0

}

function initCanvas() {

    canvas = document.getElementById('canvas');

    if (canvas.getContext) {

        ctx = canvas.getContext('2d');


        imageObj = new Image();

        imageObj.onload = function () {

            ctx.drawImage(imageObj, 0, 0);

        };

        imageObj.src = '';

    }


    canvas.addEventListener('mousedown', mouseDown, false);

    canvas.addEventListener('mouseup', mouseUp, false);

    canvas.addEventListener('mousemove', mouseMove, false);

    canvas.addEventListener('mouseout', mouseOut, false);

}

function setImage(imgName) {

    imageObj.src = 'images/' + imgName;

}

function mouseMove(e) {

    if (drag) {

        ctx.clearRect(0, 0, 500, 500);

        ctx.drawImage(imageObj, 0, 0);

        rect.w = (e.pageX - this.offsetLeft) - rect.startX;

        rect.h = (e.pageY - this.offsetTop) - rect.startY;

        ctx.strokeStyle = 'red';

        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);


        oAxis.X = rect.startX;

        oAxis.Y = rect.startY;

        oAxis.Height = rect.h;

        oAxis.Width = rect.w;

    }

}

function mouseDown(e) {

    rect.startX = e.pageX - this.offsetLeft;

    rect.startY = e.pageY - this.offsetTop;

    drag = true;

}

function mouseUp() { drag = false; }


function mouseOut() {

    return oAxis;

}