$scope.addRectangleToCanvas = function () {
    try {
        var c = document.getElementById('canvas');
        var colorPicker = $('#btnColor');
        var fontPicker = $('#bntfontsize');
        var canvas = new fabric.Canvas('canvas', { selection: true });

        var selText = $('#txtCustomComments').val();

        var color = new fabric.Color(colorPicker.val()).toRgb();

        var fontSize = fontPicker.val();

        commentText = new fabric.IText(selText, {
            fontSize: fontSize,
            hasControls: false,
            hasBorders: true,
            originX: 'center',
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: color,
            opacity: 0.6,
            fill: color,
            fontFamily: "helvetica"
        });

        var commentRectange = new fabric.Rect({
            originX: 'center',
            top: 30,
            width: 300,
            height: 200,
            fill: 'rgba(0,0,0,0)',
            stroke: color,
            strokeWidth: 4
        });

        var group = new fabric.Group([commentText, commentRectange], {
            left: 100,
            top: 150
        });

        canvas.add(group);
        canvas.bringForward(group);

    } catch (exception) {
        alert(exception);
        console.log(exception);
    }
};


$scope.GetNextNodes = function () {

    var commentRectange, commentText;
    var canvas = new fabric.Canvas('canvas', {
        selection: true
    });
    var colorPicker = $('#btnColor');
    var fontPicker = $('#bntfontsize');
    var image = new Image();
    var imageComp;

    image.crossOrigin = "Anonymous";
    image.onload = function () {
        //imageComp = fabric.Image('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function (img) {
        imageComp = fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function (img) {

            var oImg = img.set({
                angle: 0,
                cornersize: 10,
                hoverCursor: "default",
                lockMovementX: true,
                lockMovementY: true,
                lockRotation: true,
                hasRotatingPoint: true,
                hasControls: false,
                hasBorders: false,
                lockScalingFlip: true,
                lockScalingX: true,
                lockScalingY: true,
                lockSkewingX: true,
                lockSkewingY: true,
                height: image.naturalHeight,
                width: image.naturalWidth
            });
            canvas.add(oImg).setActiveObject(oImg);
            canvas.moveTo(oImg, window.objectIndex);
        }, { crossOrigin: 'Anonymous' });
        canvas.setHeight(image.naturalHeight);
        canvas.setWidth(image.naturalWidth);
    };
    image.src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg";

};


$scope.GetNextNodes();

<div id="page-wrapper">

    <div class="main-dropdown">
        <span>Nombre:</span>

        <input id="txtCustomComments" name="Comment" value="zona" placeholder="Custom comments here" class="pls-select-comments" type="text">
        <button name="btn-apply" id="btnApplyComments" value="apply" class="comment-apply-btn" ng-click="addRectangleToCanvas()">
            Agregar
        </button>
    </div>

    <div class="font-setting">
        <div class="row">
            <div class="color-picker">
                <span>Font Color:</span>
                <input id="btnColor" class="wmc-font-color" name="favcolor" value="#FF0000" type="color">
            </div>
            <div class="main-font-size">
                <span>Font Size:</span>
                <input id="bntfontsize" class="wmc-font-size" min="6" max="72" step="2" value="20" type="number">
            </div>
        </div>
    </div>
    <br />
    <br/>
    <canvas id="canvas" style="border:1px solid #d3d3d3;" />

</div>