JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="shkaf" width="735" height="500">
	<p>Not today</p>
</canvas>

JavaScript

function Dveri_kupe(options){
				var defaultOptions = {
					doorWidth: 200,
					doorHeight: 400,
					doorDivisionWidth: 5,
					totalWidth: 735,
					totalHeight: 500,
					startOffsetTop: 50,
					startOffsetLeft: 50,
					strokeColor: "#aaa",
					fillStyle: "#ccc",
					lineWidth: 5
				}
				for(var option in defaultOptions) this[option] = options && options[option]!==undefined ? options[option] : defaultOptions[option];
				
				var this_ = this;
				this.doorArr = []

				canvas = this._canvas = new fabric.Canvas(options.canvasID);
				canvas.on('mouse:down', function(options) {
					if (options.target) {
						console.log('Object. ID = ' + options.target.id + " ", options.target);
					}
				});
				
				this.addDoor = function(options){
					var doorQuan = this.doorArr.length;
					
					console.log("Door add: id = dver" + doorQuan)
					
					this.doorArr[doorQuan] = new fabric.Rect({
						left: this.startOffsetLeft + this.doorWidth * doorQuan,
						top: this.startOffsetTop,
						fill: this.fillStyle,
						width: this.doorWidth,
						height: this.doorHeight,
						strokeWidth: this.lineWidth,
						stroke: this.strokeColor,
						id: "dver" + doorQuan
					});
					
					canvas.add(this.doorArr[doorQuan]);

					return doorQuan;
				}
				
				this.tellMeAStory = function(){
					console.log(canvas)
					console.log(this.doorArr)
				}
			};
			
			var dveri_kupe;
			window.onload = function(){
				dveri_kupe = new Dveri_kupe({canvasID : "shkaf"});
				var doorQuan = 3;
				for(var i = 0; i < doorQuan; i++){
					// console.log(dveri_kupe.addDoor())
					dveri_kupe.addDoor()
				}
			}