Can't select circle canvas created by fabricjs

Question

I add circle to canvas by fabricjs, and can't select it to change size. I added circle in drawCircle method. My code

function Toolbar(can) {
    'use strict';
    var self = this;
    var canvas = can;
    var $container = $('#tool-box-container');
    var $toolboxItems = $container.find('div[data-act]');
    $toolboxItems.click(function () {
        processAction($(this).data('act'));
    });

    function drawLine() {
        var line, isDown;
        canvas.on('mouse:down', function (o) {
            isDown = true;
            var pointer = canvas.getPointer(o.e);
            var points = [pointer.x, pointer.y, pointer.x, pointer.y];
            line = new fabric.Line(points, {
                strokeWidth: 5,
                fill: 'red',
                stroke: 'red',
                originX: 'center',
                originY: 'center'                
            });
            canvas.add(line);
        });

        canvas.on('mouse:move', function (o) {

            if (!isDown)
                return;

            var pointer = canvas.getPointer(o.e);
            line.set({ x2: pointer.x, y2: pointer.y });
            canvas.renderAll();
        });

        canvas.on('mouse:up', function (o) {
            isDown = false;
        });
    }

    function drawCircle() {
        var circle, isDown, origX, origY;
        canvas.on('mouse:down', function (o) {
            isDown = true;
            var pointer = canvas.getPointer(o.e);
            origX = pointer.x;
            origY = pointer.y;
            circle = new fabric.Circle({
                left: pointer.x,
                top: pointer.y,
                radius: 5,
                strokeWidth: 3,
                stroke: 'red',
                fill:'',                
                originX: 'center', originY: 'center'
            });
            canvas.add(circle);
        });

        canvas.on('mouse:move', function (o) {

            if (!isDown)
                return true;

            var pointer = canvas.getPointer(o.e);
            circle.set({ radius: Math.abs(origX - pointer.x) });
            canvas.renderAll();
        });

        canvas.on('mouse:up', function (o) {
            isDown = false;
        });
    }

    function processAction(action) {
        switch (action) {
            case 'move':
                canvas.isDrawingMode = false;
                canvas.selection = true;
                canvas.off('mouse:down');
                canvas.off('mouse:move');
                canvas.off('mouse:up');
                break;

            case 'brush':
                canvas.isDrawingMode = true;
                break;

            case 'pencil':
                canvas.isDrawingMode = true;
                break;

            case 'erase':
                canvas.clear();
                break;

            case 'image':
                $('#add-image').modal('show');
                break;

            case 'circle':
                canvas.isDrawingMode = false;
                canvas.selection = false;
                drawCircle();
                break;

            case 'square':
                canvas.isDrawingMode = false;
                canvas.selection = false;
                drawLine();
                break;

            case 'text':
                canvas.isDrawingMode = true;
                break;

            case 'back':
                break;

            case 'forward':
                break;
        }
    }
}

function Paint($cont) {
    'use strict';
    var self = this;
    var container = $cont;
    var canvas = new fabric.Canvas('main-canvas', {
        isDrawingMode: true
    });
    var toolbox = new Toolbar(canvas);
    canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);

    canvas.freeDrawingBrush.color = "black";
    canvas.freeDrawingBrush.width = 10;
    canvas.freeDrawingBrush.shadowBlur = false;

    self.canvas = canvas;
    self.container = container;
}

Answer 1

This happen because you change the circle dimensions after adding it to the canvas. During mousemove you change the circle radius, but this will not change its selectable area.

During mouse up, call circle.setCoords() to recalculate circle boudingbox

canvas.on('mouse:up', function (o) {
    isDown = false;
    circle.setCoords();
});