In fabric .js, objects are selected even though the canvas parameter 'selection:false'

Question

Since I am a non-English speaking person, I am not familiar with English.

The title is the content. Here is .GIF

enter image description here

The black line drawn by hovering over is not selected, but the gray line created when the coordinates are first created is selected.

As you can see from the code, I initially declared selection: false when initializing the code. There is no other code to manipulate the selection, so I deleted it for readability.

Here is my code

//기본 랜더링 변수
var mCanvas;
var line;
var isDown;

var newLine;

//첫 벡터 근처로 오는것을 감지
var firstVector = null;
var nearFirstVector = false;

// 마지막 점에서 움직이기 위한 변수
var lastPoint;

//가이드라인 보정 변수
var isGuideline = false;
var xGuideLine;
var yGuideLine;

window.onload = function drawOneLine(){
    
    initHTML();
    setListener();
}

function initHTML(){
    mCanvas = window._canvas = new fabric.Canvas('c');
    mCanvas.selection = false;
}

function guidelineMode(){
    var target = document.getElementById("guidelineMode");
    
    if(!isGuideline) {
        console.log("가이드라인 모드 진입");
        target.style.color = "red";
        isGuideline = true;
        if(firstVector == null) {
            console.log("찍어놓은 좌표 없음");
        } else {
            console.log("찍어놓은 좌표 있음");
            drawGuideline(firstVector[0],firstVector[1])
        }

    } else {
        console.log("가이드라인 모드 해제");
        target.style.color = "black";
        removeSpot(mCanvas, "xGuideLine")
        removeSpot(mCanvas, "yGuideLine")

        isGuideline = false;

    }


}
  
function drawGuideline(x, y){
    var firstX, firstY, lastX, lastY;
    if(x-250 < 0) firstX = 0
    else firstX = x-250

    if(x+250 > 1000) lastX = 1000
    else lastX = x+250

    if(y-250 < 0) firstY = 0
    else firstY = y-250

    if(y+250 > 1000) lastY = 1000
    else lastY = y+250

    var xPoint = [firstX, y, lastX, y];
    var yPoint = [x, firstY, x, lastY]; 

    xGuideLine = new fabric.Line(xPoint, {
        id : 'xGuideLine',
        strokeWidth : 3,
        fill : 'rgba(211,211,211,0.5)',
        stroke : 'rgba(211,211,211,0.5)',
        originX : 'center',
        originY : 'center'
    });

    yGuideLine = new fabric.Line(yPoint, {
        id : 'yGuideLine',
        strokeWidth : 3,
        fill : 'rgba(211,211,211,0.5)',
        stroke : 'rgba(211,211,211,0.5)',
        originX : 'center',
        originY : 'center'
    });
    
    mCanvas.add(xGuideLine);
    mCanvas.add(yGuideLine);
    mCanvas.renderAll();
}

function setListener(){
    mCanvas.on('mouse:down', function(o){

        isDown = true
        
        if(lastPoint == null) {

            console.log("null");

            var pointer = mCanvas.getPointer(o.e)
            console.log("마우스 다운" + pointer.x + " , " + pointer.y);
        
            var point = [pointer.x, pointer.y, pointer.x, pointer.y];
            line = new fabric.Line(point, {
                id : objectId,
                strokeWidth : 2,
                fill : 'rgba(0,0,0,128)',
                stroke : 'rgba(0,0,0,0.5)',
                originX : 'center',
                originY : 'center'
            });

            firstVector = [pointer.x, pointer.y];
            addFirstVector = [pointer.x, pointer.y];

            if(isGuideline) {
                drawGuideline(firstVector[0], firstVector[1])
            }
            
        } else {
            console.log("not null");

            var pointer = mCanvas.getPointer(o.e)
            console.log("마우스 다운" + pointer.x + " , " + pointer.y);
            console.log("마지막 마우스 포인트" + lastPoint[0] + " , " + lastPoint[1]);
    
            var point = [lastPoint[0], lastPoint[1], lastPoint[0], lastPoint[1]];
            line = new fabric.Line(point, {
                id : objectId,
                strokeWidth : 2,
                fill : 'rgba(0,0,0,1)',
                stroke : 'rgba(0,0,0,0.5)',
                originX : 'center',
                originY : 'center'
            }); 

            addFirstVector = [lastPoint[0], lastPoint[1]];

        }
    
        console.log(objectId);
        mCanvas.add(line)

    });

    mCanvas.on('mouse:move', function(o){
        
        if(!isDown) {
            return;
        }

        renderingObject = true;
        console.log("마우스 이동");

        var pointer = mCanvas.getPointer(o.e);
        var x2poistion;

        if(isCorrection) {
            var slopeLength = lengthXtoY(addFirstVector, [pointer.x, pointer.y])
            var xLength;
            if(addFirstVector[0] - pointer.x >= 0 ){
                xLength = addFirstVector[0] - pointer.x
            } else {
                xLength = pointer.x - addFirstVector[0]
            }

            var cos45 = Math.sqrt(2)/2;
            var cosRadius = xLength/slopeLength; 

            if(cosRadius > cos45 && cosRadius < 1) {
                line.set({x2 : pointer.x, y2 : addFirstVector[1]});
                x2poistion = [pointer.x,  addFirstVector[1]];
                isX = true;
            } else if (cosRadius <= cos45 && cosRadius > 0 ){
                line.set({x2 : addFirstVector[0], y2 : pointer.y});
                x2poistion = [addFirstVector[0],  pointer.y];
                isX = false;
            } else if(slopeLength == xLength){
                line.set({x2 : pointer.x, y2 : addFirstVector[1]});
                x2poistion = [pointer.x,  addFirstVector[1]];
                isX = true;
            } else if(xLength == 0){
                line.set({x2 : addFirstVector[0], y2 : pointer.y});
                x2poistion = [addFirstVector[0],  pointer.y];
                isX = false;
            } else {
                console.log("수식 오류 : "+ cosRadius)
            }


        } else {
            line.set({x2 : pointer.x, y2 : pointer.y});
            x2poistion = [pointer.x,  pointer.y];
        }

        if(isGuideline) {

            if(x2poistion[0] == firstVector[0]) {
                yGuideLine.set({
                    fill : '#ab88ff',
                    stroke : '#ab88ff'
                })
            } else {
                yGuideLine.set({
                    fill : 'rgba(211,211,211,0.5)',
                    stroke : 'rgba(211,211,211,0.5)'
                })
            }

            if(x2poistion[1] == firstVector[1]) {
                xGuideLine.set({
                    fill : '#ab88ff',
                    stroke : '#ab88ff'
    
                })
            } else {
                xGuideLine.set({
                    fill : 'rgba(211,211,211,0.5)',
                    stroke : 'rgba(211,211,211,0.5)'
                })
            }

        }

        mCanvas.renderAll();

    });

    mCanvas.on('mouse:up', function(o){
        console.log("마우스 업");
        isDown = false;

        var pointer = mCanvas.getPointer(o.e);

        if(isCorrection && isX) {
            lastPoint = [pointer.x, addFirstVector[1]];
        } else if(isCorrection && !isX) {
            lastPoint = [addFirstVector[0], pointer.y];
        } else {
            lastPoint = [pointer.x, pointer.y];
        }

        if(renderingObject == true) {
            console.log("랜더링 만들어져쏘");
            objectId = objectId+1;
            renderingObject = false;
        } else {
            console.log("랜더링 안만들어져쏘");
            renderingObject = false;
        }
    
    });

    mCanvas.on('mouse:dblclick', function(o){
        console.log("더블클릭");
        lastPoint = null;
    
    });

}

Answer 1

The property you want to use is selectable.

Try setting obj.selectable = false; on your object.