JavaScript:

simpleCanvas.js

/**
 * Author: tsmsogn
 * Version: 0.0.1
 * Requires EaselJS 0.5.0
 *
 * Distributed under the terms of the MIT license.
 * http://www.opensource.org/licenses/mit-license.html
 */
function SimpleCanvas() {
    this.initialize.apply(this, arguments);
}

SimpleCanvas.prototype._debug = false;
SimpleCanvas.prototype._isSelectable = false;
SimpleCanvas.prototype._selectedObject = null;
SimpleCanvas.prototype._currentType = "circle";
SimpleCanvas.prototype._types = new Array('circle', 'rect');
SimpleCanvas.prototype._circles = [];
SimpleCanvas.prototype._color = "rgba(255, 255, 255, 1)";
SimpleCanvas.prototype._frameElements = [];

SimpleCanvas.prototype.initialize = function (canvas, options) {
    this._update = true;
    //this._type = '' || ;
    this._canvas = canvas;
    this._history = new Array();
    this._stage = new createjs.Stage(this._canvas);

    // implements event listener
    (function (target, instance) {

        target.onMouseDown = function (e) {

            if (!instance._isSelectable) {

                // Add object
                var type = instance.getType();
                var s;

                switch (type) {
                    case 'circle':
                        instance.setPosition({x:e.stageX, y:e.stageY});
                        var g = new createjs.Graphics().beginFill("rgba(255, 255, 255, 0.5)").drawCircle(0, 0, 30).endFill();
                        s = new createjs.Shape(g);
                        s.x = e.stageX;
                        s.y = e.stageY;
                        // @TODO
                        s._width = 60;
                        s._height = 60;
                        break;
                    case 'rect':
                        instance.setPosition({x:e.stageX, y:e.stageY});
                        var g = new createjs.Graphics().beginFill("rgba(255, 255, 255, 0.5)").drawRect(0, 0, 30, 60).endFill();
                        s = new createjs.Shape(g);
                        // @TODO
                        s.x = e.stageX - 15;
                        s.y = e.stageY - 30;
                        // @TODO
                        s._width = 30;
                        s._height = 60;
                        break;
                    default:
                        break;
                }

                instance._stage.addChild(s);
                instance._update = true;

                (function (target) {

                    target.onPress = function (e) {

                        var offset = {x:target.x - e.stageX, y:target.y - e.stageY};

                        e.onMouseMove = function (evt) {

                            target.x = evt.stageX + offset.x;
                            target.y = evt.stageY + offset.y;

                            // @TODO
                            var targetOffset = {x:30, y:30};

                            if (instance.isSelectable()) {
                                instance._createFrame();
                            }

                            instance._update = true;
                        }

                    }

                })(s);

                //instance.draw();
            } else {

                var displayObject = instance._stage.getObjectUnderPoint(e.stageX, e.stageY);

                if (displayObject && !instance.isFrameElement(displayObject.id)) {
                    instance.setSelectedObject(displayObject);
                    instance._createFrame();
                }

            }

        };

        target.onMouseUp = function (e) {
        }

    })(this._stage, this);

    new createjs.Ticker.addListener(this);
};

SimpleCanvas.prototype.tick = function () {
    if (this._update) {
        this._update = false;
        this._stage.update();
    }
};

SimpleCanvas.prototype.setSelectable = function (selectable) {
    // @TODO validate
    this._isSelectable = selectable;

    // remove frame
    if (!this.isSelectable()) {
        this._removeFrame();
    }

};

SimpleCanvas.prototype.isSelectable = function () {
    return this._isSelectable;
};

SimpleCanvas.prototype.setColor = function (color) {
    // @TODO validate
    this._color = color;
};

SimpleCanvas.prototype.getColor = function () {
    return this._color;
};

/**
 *
 * @param type
 * @return {Boolean}
 * @private
 */
SimpleCanvas.prototype._validateType = function (type) {
    for (var i = 0; i < this._types.length; i++) {
        var _type = this._types[i];
        if (type == _type) {
            return true;
        }
    }
    return false;
};

/**
 *
 * @param type
 */
SimpleCanvas.prototype.setType = function (type) {
    // @TODO test
    if (this._validateType(type)) {
        this._currentType = type;
    }
};

/**
 *
 * @return {String}
 */
SimpleCanvas.prototype.getType = function () {
    return this._currentType;
};

SimpleCanvas.prototype.setSelectedObject = function (object) {
    // @TODO validate
    this._selectedObject = object;
};

SimpleCanvas.prototype.getSelectedObject = function () {
    return this._selectedObject;
};

/**
 *
 * @param id
 * @return {Boolean}
 */
SimpleCanvas.prototype.isFrameElement = function (id) {

    for (var i = 0; i < this._frameElements.length; i++) {
        var element = this._frameElements[i];
        if (element.id == id) {
            return true;
        }
    }

    return false;
};

/**
 *
 * @private
 */
SimpleCanvas.prototype._removeFrame = function () {

    for (var i = 0; i < this._frameElements.length; i++) {
        var element = this._frameElements[i];
        this._stage.removeChild(element);
    }

    this._frameElements = [];
    this._update = true;
};

/**
 *
 * @param target
 * @param x
 * @param y
 * @return {Boolean}
 */
SimpleCanvas.prototype.isCenterPositionObject = function (target, x, y) {

    var objects = this._stage.getObjectsUnderPoint(x - 1, y - 1);

    for (var i = 0; i < objects.length; i++) {
        var object = objects[i];
        if (object.id == target.id) {
            return true;
        }
    }

    return false;
};

/**
 *
 * @private
 */
SimpleCanvas.prototype._createFrame = function () {

    this._removeFrame();

    var target = this.getSelectedObject();

    // @TODO target type
    var flag = this.isCenterPositionObject(target, target.x, target.y);

    var topLeft = {
        x:(flag) ? target.x - target._width / 2 * target.scaleX : target.x,
        y:(flag) ? target.y - target._height / 2 * target.scaleY : target.y
    };

    var bottomRight = {
        x:(flag) ? target.x + target._width / 2 * target.scaleX : target.x + target._width * target.scaleX,
        y:(flag) ? target.y + target._height / 2 * target.scaleY : target.y + target._height * target.scaleY
    };

    // create frame
    var g = new createjs.Graphics();
    // @TODO
    g.setStrokeStyle(1).beginStroke("rgba(255, 255, 255, 0.5)").drawRect(0, 0, target._width * target.scaleX, target._height * target.scaleY).endStroke();
    var shape = new createjs.Shape(g);
    shape.x = topLeft.x;
    shape.y = topLeft.y;
    this._stage.addChild(shape);
    this._frameElements.push(shape);

    // create circles
    var circles = ["topLeft", "topRight", "bottomRight", "bottomLeft"];
    for (var i = 0; i < circles.length; i++) {
        var name = circles[i];
        // @TODO
        var g = new createjs.Graphics().beginFill("rgba(255, 255, 255, 1)").drawCircle(0, 0, 20).endFill();
        var s = new createjs.Shape(g);
        s.x = (name.match(/Right$/)) ? bottomRight.x : topLeft.x;
        s.y = (name.match(/^bottom/)) ? bottomRight.y : topLeft.y;
        s.name = name;

        // add circle to stage
        this._stage.addChild(s);
        this._frameElements.push(s);

        // implements event listener
        (function (target, instance) {

            target.onPress = function (e) {

                var selectedObject = instance.getSelectedObject();
                var flag = instance.isCenterPositionObject(selectedObject, selectedObject.x, selectedObject.y);

                // Set relative position from selected object
                var offset = {
                    x:target.x - e.stageX,
                    y:target.y - e.stageY
                };

                // Set selected object scale
                var scale = {
                    x:selectedObject.scaleX,
                    y:selectedObject.scaleY
                };

                var topLeft = {
                    x:(flag) ? selectedObject.x - selectedObject._width / 2 * scale.x : selectedObject.x,
                    y:(flag) ? selectedObject.y - selectedObject._height / 2 * scale.y : selectedObject.y
                };

                var bottomRight = {
                    x:(flag) ? selectedObject.x + selectedObject._width / 2 * scale.x : selectedObject.x + selectedObject._width * scale.x,
                    y:(flag) ? selectedObject.y + selectedObject._height / 2 * scale.y : selectedObject.y + selectedObject._height * scale.y
                };

                e.onMouseMove = function (evt) {

                    var name = target.name;

                    switch (name) {
                        case "topLeft":
                            topLeft.x = evt.stageX + offset.x;
                            topLeft.y = evt.stageY + offset.y;
                            break;
                        case "topRight":
                            bottomRight.x = evt.stageX + offset.x;
                            topLeft.y = evt.stageY + offset.y;
                            break;
                        case "bottomRight":
                            bottomRight.x = evt.stageX + offset.x;
                            bottomRight.y = evt.stageY + offset.y;
                            break;
                        case "bottomLeft":
                            topLeft.x = evt.stageX + offset.x;
                            bottomRight.y = evt.stageY + offset.y;
                            break;
                    }

                    // Set scale
                    selectedObject.scaleX = (bottomRight.x - topLeft.x) / selectedObject._width;
                    selectedObject.scaleY = (bottomRight.y - topLeft.y) / selectedObject._height;

                    switch (flag) {
                        case true:
                            selectedObject.x = (bottomRight.x + topLeft.x) / 2;
                            selectedObject.y = (bottomRight.y + topLeft.y) / 2;
                            break;
                        case false:
                            selectedObject.x = topLeft.x;
                            selectedObject.y = topLeft.y;
                            break;
                        default :
                            break;
                    }

                    // update frame
                    instance._updateFrame(topLeft, bottomRight);
                    instance._update = true;
                }

            }
        })(s, this);

    }

    this._update = true;
}
;

/**
 *
 * @param topLeft
 * @param bottomRight
 * @private
 */
SimpleCanvas.prototype._updateFrame = function (topLeft, bottomRight) {
    if (this._frameElements.length > 0) {
        for (var i = 0; i < this._frameElements.length; i++) {
            var element = this._frameElements[i];
            switch (element.name) {
                case "topLeft":
                    element.x = topLeft.x;
                    element.y = topLeft.y;
                    break;
                case "topRight":
                    element.x = bottomRight.x;
                    element.y = topLeft.y;
                    break;
                case "bottomRight":
                    element.x = bottomRight.x;
                    element.y = bottomRight.y;
                    break;
                case "bottomLeft":
                    element.x = topLeft.x;
                    element.y = bottomRight.y;
                    break;
                default :
                    element.x = topLeft.x;
                    element.y = topLeft.y;
                    // @TODO
                    element.graphics.clear().setStrokeStyle(1).beginStroke("rgba(255, 255, 255, 0.5)").drawRect(0, 0, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y).endStroke();
                    break;
            }
        }
        this._update = true;
    }
};

SimpleCanvas.prototype.rotate = function (rotation) {

    var selectedObject = this.getSelectedObject();

    if (selectedObject) {
        selectedObject.rotation = rotation;
    }

};

SimpleCanvas.prototype.setPosition = function (position) {
    // @TODO validate
    this._position = position;
};

SimpleCanvas.prototype.draw = function () {
    // @TODO
};

SimpleCanvas.prototype.toImage = function () {
    // @TODO
};