よし、まずはEaselJSで四角を描いてみる #CreateJS

sample
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>EaselJSで四角を描く</title>
</head>
<body>

    <canvas id="canvas" width="1920" height="1140"></canvas>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function(){
            create();
        }, false);


        function create(){
            // stage生成
            var stageElm = document.querySelector('#canvas');
            var stage = new createjs.Stage(stageElm);
            // フレームレート設定
            createjs.Ticker.setFPS(30);
            // 1フレームごとに実行される
            createjs.Ticker.addEventListener('tick', function(){
                stage.update();
            });

            // 四角を描画
            var graphic = new createjs.Graphics();
            graphic.beginStroke('#000') // 線の色
            .beginFill('red') // 色
            .drawRect(0, 0, 100, 100); // 四角のサイズ (x1,y1, x2, y2)
            var shape = new createjs.Shape(graphic);
            stage.addChild(shape);
        }
    </script>
</body>
</html>