始めに

CreateJsで描画したオブジェクトのリサイズをやってみます
お試しサイト

https://afternoon-garden-70542.herokuapp.com/createjssample.html
にサンプルページをアップしています
感想

生Canvasを使ってコーディングするのに比べ、はるかに簡素なロジックでオブジェクトの操作が可能になります
すごいぜ、CreateJS!
#ソース
sample.html
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/base.css" />
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script>
    //Canvasに対する各種イベント処理を管理するオブジェクト
    var myCanvasHander
    //Canvasに対する各種イベント処理の追加、削除を管理するオブジェクト定義します
    var sOpe  
    //オブジェクトのリサイズの可否を管理するフラグです
    var isResize = false
    //オブジェクトのリサイズ時に一度、イベントハンドラの処理を行ったら
    //それ以降イベントハンドラの追加処理を抑止するためのフラグです
    var isChangeEvent = false
    
    function MyCanvasHander(mystage){
        //CreateJsのStageオブジェクト
        var lstage = mystage
        var dragPointX
        var dragPointY
        var myshape
        var mouseclickflag
        var firstmove
        
        this.handleDown = function(e) {
            // ドラッグを開始した座標を覚えておく
            var rect = e.target.getBoundingClientRect();
            dragPointX = e.clientX - rect.left;
            dragPointY = e.clientY - rect.top;
            mouseclickflag =true
            firstmove = true;
        }
        this.handleMousemove = function(e){
            if(!mouseclickflag)return
            //mouseDownイベント後の初回のMoveイベント時は前のshapeは削除しない
            if(!firstmove && myshape && myshape.shape){
                lstage.removeChild(myshape.shape)
            }
            firstmove = false
            var rect = e.target.getBoundingClientRect();
            //四角形のオブジェクトを生成する
            myshape = new Rectengle(
                dragPointX,
                dragPointY,
                e.clientX - rect.left-dragPointX,
                e.clientY - rect.top-dragPointY,
                "Yellow")
            myshape.init(lstage)
            myshape.shape.alpha = 0.5;
        }
        this.handleMouseup = function(e){
            myshape.shape.alpha = 1.0;
            mouseclickflag =false
        }
    }
    
    function ShapeOperationToCanvas(myCanvasHander){
        //Canvasに対する各種イベントの定義を行います
        var funcs ={
            mousedown:{handleDown:myCanvasHander.handleDown},
            mousemove:{handleMousemove:myCanvasHander.handleMousemove},
            mouseup:{handleMouseup:myCanvasHander.handleMouseup}
        }
        //Canvasに対する各種イベントを追加します
        this.addOperation = function(){
            var canvas = document.getElementById('myCanvas');
            canvas.addEventListener('mousedown', funcs['mousedown']['handleDown'], false);
            canvas.addEventListener('mousemove', funcs['mousemove']['handleMousemove'], false);
            canvas.addEventListener('mouseup', funcs['mouseup']['handleMouseup'], false);
        }
        //Canvasに対する各種イベントを削除します
        this.removeOperation = function (){
            var canvas = document.getElementById('myCanvas');
            canvas.removeEventListener('mousedown', funcs['mousedown']['handleDown']);
            canvas.removeEventListener('mousemove', funcs['mousemove']['handleMousemove']);
            canvas.removeEventListener('mouseup', funcs['mouseup']['handleMouseup']);
        }
    }
    
    // ページの読み込みが終わってから初期化
    window.addEventListener("load", init);
    function init() {
        //Stageの生成とキャンバスに対する操作は
        //画面のロード完了後、実行する
        myCanvasHander= new MyCanvasHander(new createjs.Stage("myCanvas"))
        sOpe = new ShapeOperationToCanvas(myCanvasHander)
    }
    
    function Rectengle(start_x,start_y,end_x,end_y,color){
        this.width=end_x-start_x
        this.height=end_y-start_y
        this.color=color
        this.start_x=start_x
        this.start_y=start_y
        this.end_x=end_x
        this.end_y=end_y
        this.shape
        
        this.init = function(stage){
            // 初期化
            //　図形を作成
            this.shape = new createjs.Shape();
            stage.addChild(this.shape);
            this.shape.graphics.beginFill(color)
            .drawRect(this.start_x,this.start_y,this.end_x,this.end_y);
            // ドラッグした場所を保存する変数
            var dragPointX;
            var dragPointY;
            // インタラクティブの設定 drawShape
            this.shape.addEventListener("mousedown", handleDown);
            this.shape.addEventListener("pressmove", handleMove);
            this.shape.addEventListener("pressup", handleUp);
            stage.update()
            var _self = this;
            // 図形を押したときの処理です
            function handleDown(event) {
              sOpe.removeOperation()
              if(!isChangeEvent&&isResize){
                  _self.shape.addEventListener("pressmove", handleMoveOnResizing);
                  _self.shape.removeEventListener("pressmove", handleMove);
              }else if(!isResize){
                  _self.shape.addEventListener("pressmove", handleMove);
                  _self.shape.removeEventListener("pressmove", handleMoveOnResizing);
              }
              // ドラッグを開始した座標を覚えておく
              dragPointX = stage.mouseX - _self.shape.x;
              dragPointY = stage.mouseY - _self.shape.y;
              // ボールを半透明にする
              _self.shape.alpha = 0.3;
            }
            // 図形を押した状態で動かしたときの処理です(オブジェクトの移動)
            function handleMove(event) {
              // ボールはマウス座標に追随する
              // ただしドラッグ開始地点との補正をいれておく
              _self.shape.x = stage.mouseX - dragPointX;
              _self.shape.y = stage.mouseY - dragPointY;
            }
            // 図形を押した状態で動かしたときの処理です(オブジェクトのリサイズ)
            function handleMoveOnResizing(event) {
                //いったん、描画したオブジェクトを消す
                 _self.shape.graphics.clear().beginFill(_self.color)
                .drawRect(
                    _self.start_x,
                    _self.start_y,
                    stage.mouseX ,
                    stage.mouseY );
            }
            // ボールからマウスを離したときの処理です
            function handleUp(event) {
              // ボールを元の透明度に戻す
              _self.shape.alpha = 1.0;
            }
            // 時間経過
            createjs.Ticker.addEventListener("tick", handleTick);
            function handleTick() {
                stage.update(); // 画面更新
            }
        }
        
    }
    
  </script>
</head>
<body>
  <canvas id="myCanvas" width="500" height="300"></canvas><br>
  <input type = button  value = "図形追加 ON" onclick="sOpe.addOperation();isResize=false">
  <input type = button  value = "図形追加 OFF" onclick="sOpe.removeOperation();isResize=false">
  <input type = button  value = "図形リサイズ ON" onclick="isResize=true">
  <input type = button  value = "図形リサイズ OFF" onclick="isResize=false;isChangeEvent=false"><br>
  
  <h1 id="-">使い方</h1>
<ul>
<li>図形追加ボタン ONを押したとき<br>マウスの動きの合わせて図形が追加できます<br>この時、Cavasに追加オブジェクトを移動させたり、リサイズしたりはできません    </li>
<li>図形追加ボタン OFFを押したとき<br>図形追加モードが解除され、追加したイメージの移動ができるようになります    </li>
<li>図形リサイズON ボタンを押したとき<br>Canvasに追加したイメージをリサイズすることができます。<br>この時、イメージの移動はできません</li>
<li>図形リサイズOFFボタンを押したとき<br>Canvasに追加したイメージを移動できるようになります</li>
</ul>

</body>
</html>