paste

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas - Drawing App</title>
    </head>
    <body>
        <canvas width="900px" height="500px" id="canvas">
        </canvas>
        <br>
        <div>
            <label for="">Color</label><br>
            <input type="color" id="color">
        </div>
        <div>
            <label for="">Size</label>
            <select name="" id="size">
                <option value="25">25px</option>
                <option value="50">50px</option>
            </select>
        </div>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext("2d");

            var x = 0;
            var goto = "right";
            var dragging = false;

                ctx.fillStyle = "#000";
                ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);

                function StartDrag(evt) {
                    dragging = true;
                }
                function Drag(evt){

                    if(dragging === true){
                        var mousePost = getMousePost(canvas, evt);

                        var x = getMousePost(canvas,evt).x;
                        var y = getMousePost(canvas,evt).y;

                        ctx.beginPath();
                        ctx.fillStyle = document.getElementById('color').value;
                        ctx.arc(x,y, document.getElementById('size').value, 0, 2 * Math.PI );
                        ctx.fill();
                    }
                }
                function StopDrag(evt){
                    dragging = false;
                }
                canvas.addEventListener('mousedown',StartDrag,false);
                canvas.addEventListener('mousemove',Drag,false);
                canvas.addEventListener('mouseup',StopDrag,false);

                function getMousePost(canvas, evt){
                    var rect = canvas.getBoundingClientRect();

                    return {
                        x: evt.clientX - rect.left,
                        y: evt.clientY - rect.top
                    };
                }
        </script>
    </body>
</html>