let canvas = new fabric.

Canvas('canvas', {
width: window.innerWidth,
height: window.innerHeight
});

let addingLineBtn = document.getElementById('adding-line-btn');

let addingRectangleBtn = document.getElementById('adding-rectangle-btn');

addingLineBtn.addEventListener('click', activeAddingLine);
addingRectangleBtn.addEventListener('click', activeAddingRectangle);

function activeAddingLine() {

canvas.off('mouse:down', startAddingRectangle);
canvas.off('mouse:move', startDrawingRectangle);
canvas.off('mouse:up', stopDrawingRectangle);

canvas.on('mouse:down', startAddingLine);
canvas.on('mouse:move', startDrawingLine);
canvas.on('mouse:up', stopDrawingLine);

canvas.selection = false;
}

let line;
let mouseDown = false;

function startAddingLine(o) {
mouseDown = true;
let pointer = canvas.getPointer(o.e);

line = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {

stroke: 'red',
strokeWidth: 3
});

canvas.add(line);
canvas.requestRenderAll();
}

function startDrawingLine(o) {

if (mouseDown === true) {

let pointer = canvas.getPointer(o.e);

line.set({
x2: pointer.x,
y2: pointer.y
 });
canvas.requestRenderAll();
}

function stopDrawingLine() {
mouseDown = false;
}

function activeAddingRectangle() {
canvas.off('mouse:down', startAddingLine);
canvas.off('mouse:move', startDrawingLine);
canvas.off('mouse:up', stopDrawingLine);

canvas.on('mouse:down', startAddingRectangle);
canvas.on('mouse:move', startDrawingRectangle);
canvas.on('mouse:up', stopDrawingRectangle);

canvas.selection = false;
}

let rectangle;
let mouseDownRectangle = false;

function startAddingRectangle(o) {
mouseDownRectangle = true;
let pointer = canvas.getPointer(o.e);

rectangle = new fabric.Rect({

left: pointer.x,
top: pointer.y,
width: 50, // Sesuaikan dengan lebar yang diinginkan
height: 50, // Sesuaikan dengan tinggi yang diinginkan
fill: 'blue', // Warna isi persegi panjang
strokeWidth: 2,
stroke: 'black'
});

canvas.add(rectangle);
canvas.requestRenderAll();
}

function startDrawingRectangle(o) {
if (mouseDownRectangle === true) {
let pointer = canvas.getPointer(o.e);

let width = pointer.x - rectangle.left;

 let height = pointer.y - rectangle.top;

rectangle.set({
width: width,
height: height
});
canvas.requestRenderAll();
}
}

function stopDrawingRectangle() {
mouseDownRectangle = false;
}