create.jsでドラッグアンドドロップ・描画を行いたいです

###前提・実現したいこと
create.jsを使ってCANVAS内でお絵かき・ドラッグアンドドロップできる様にしたいです。
js初心者で恐縮ですが、もう一週間程手が詰まっておりましてご教授頂けると幸いです。

実装したい機能
・canvas外(galleryクラス)から画像をドラッグアンドドロップしたらCANVASに表示したい
・ウィンドウ外(デスクトップ等)からドラッグアンドドロップしたらCANVASに表示したい
・ラジオボタンを切り替えて、ドラッグして四角・丸・多角を描画したい

###発生している問題・エラーメッセージ

塗りの色を変更したら現状丸オブジェクトの塗りを変更したいのですが、
適用されません。

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body onload="init()">
    <div class="gallery">
        <img src="images/sample2.jpg">
        <img src="images/sample3.jpg">
        <img src="images/sample4.jpg">
    </div>
    <canvas id="myCanvas" width="900" height="600"></canvas>
    
<div id="controls">
    <p>
        <label>Fill:
            <input id="fillBox" type="checkbox" checked="checked">
        </label>
    </p>
    <div class="lightBorder">
        <p>
            <label>Fill Color:
                <input id="fillColor" type="color" value="#6ca3fa">
            </label>
        </p>
        <p>
            <label>Canvas Color:
                <input id="backgroundColor" type="color">
            </label>
        </p>
        <p>
            <label>Stroke Color:
                <input id="strokeColor" type="color">
            </label>
        </p>
    </div>
    <div class="lightBorderA">
        <p>
            <label>Line width:
                <input id="lineWidth" type="range" step="1" min="1" max="200">
            </label>
        </p>
        <ul>
            <li>
                <input type="radio" name="lineCap" value="butt" checked="checked" id="buttSelect">
                <label for="buttSelect">butt</label>
                <div class="check">
                    <div class="inside"></div>
                </div>
            </li>
            <li>
                <input type="radio" name="lineCap" value="round" id="roundSelect">
                <label for="roundSelect">round</label>
                <div class="check">
                    <div class="inside"></div>
                </div>
            </li>
            <li>
                <input type="radio" name="lineCap" value="square" id="squareSelect">
                <label for="squareSelect">square</label>
                <div class="check">
                    <div class="inside"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="lightBorderB">
        <p>ObjectType</p>
        <ul class="objectType">
            <li>
                <input id=iconline type="radio" name="shape" value="line" checked="checked">
                <label for="iconline">line</label>
                <div class="check">
                    <div class="inside"></div>
                </div>
            </li>
            <li>
                </label>
                <input id=iconcircle type="radio" name="shape" value="circle">
                <label for="iconcircle">circle</label>
                <div class="check">
                    <div class="inside"></div>
                </div>
            </li>
            <li>
                <input id=iconpolygon type="radio" name="shape" value="polygon">
                <label for="iconpolygon">polygon</label>
                <div class="check">
                    <div class="inside"></div>
                </div>
            </li>
        </ul>
    </div>
    <p>
        <label>Polygon Sides:
            <input id="polygonSides" type="range" step="1" min="3" max="10">
        </label>
    </p>
    <p>
        <label>Polygon Angle:
            <input id="polygonAngle" type="range" step="22.5" min="0" max="90">
        </label>
    </p>

    <input id="clearCanvas" type="button" value="clearCanvas">

</div>

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>
<script>
    window.addEventListener("load", init);
function init() {
    var stage = new createjs.Stage("myCanvas");
    var radius = 100;
    var dragPointX;
    var dragPointY;
    
    //円の生成
    var round = new createjs.Shape();
    var fillColor = document.getElementById("fillColor").value;
    console.log(fillColor);
    round.graphics.beginFill("DarkRed").drawCircle(0,0,radius);
    
    var bmp = new createjs.Bitmap("images/sample1.jpg");
    round.x = stage.canvas.width / 2;
    round.y = stage.canvas.height / 2;
    stage.addChild(round);
    
    //インタラクティブ設定
    round.addEventListener("mousedown",handleDown);
    round.addEventListener("pressmove",handleMove);
    round.addEventListener("pressup",handleUp);
    
    function handleDown(event) {
        dragPointX = stage.mouseX - round.x;
        dragPointY = stage.mouseX - round.y;
        round.alpha = 0.5;
    }
    
    function handleMove(event) {
        round.x = stage.mouseX - dragPointX;
        round.y = stage.mouseY - dragPointY;
    }
    
    function handleUp(event) {
        round.alpha = 1.0;
    }
    
    stage.addChild(bmp);
    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick() {
        stage.update();
    }
}
</script>
    
</body>
</html>