JSFiddle - React, Tailwind, and code Playground

by Balázs Baumgartner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

(function() {
	const wood1 = 'http://iunidaragon.org/wp-content/uploads/2016/10/bed-wooden-designs-free-seamless-wood-texture-free-seamless-repeating-background-pattern-wood-800x800.jpg';
  const wood2 = 'http://www.photoshopbuzz.com/wp-content/uploads/2013/06/woodtexture7.jpg';
  var canvas = this.__canvas = new fabric.Canvas('canvas');
    
  const doorWidth = 250;
  const doorHeight = 450;
  const frameThickness = 15;

  var door = new fabric.Rect({
    width: doorWidth,
    height: doorHeight,
    left: frameThickness,
    top: frameThickness,
    fill: 'brown',
  });

  var pol_1 = new fabric.Polygon([
    {x: 0, y: 0},
    {x: 0, y: doorHeight + frameThickness},
    {x: frameThickness, y: doorHeight + frameThickness},
    {x: frameThickness, y: frameThickness} ], {
    left: 0,
    top: 0,
    angle: 0,
  }
                                );

  var pol_2 = new fabric.Polygon([
    {x: 0, y: 0},
    {x: 0, y: doorWidth + 2 * frameThickness},
    {x: frameThickness, y: doorWidth + frameThickness},
    {x: frameThickness, y: frameThickness},
  ], {
    left: (doorWidth + 2 * frameThickness) + 1,
    top: 0,
    angle: 90,
  }
                                );

  var pol_3 = new fabric.Polygon([
    {x: frameThickness, y: 0},
    {x: frameThickness, y: doorHeight + frameThickness},
    {x: 0, y: doorHeight + frameThickness},
    {x: 0, y: frameThickness} ], {
    left: doorWidth + frameThickness,
    top: 0,
    angle: 0,
  }
                                );

  canvas.add(door, pol_2, pol_3, pol_1);

  fabric.util.loadImage(wood1, function (img) {
    door.setPatternFill({
      source: img,
      repeat: 'repeat'
    });
  });

  fabric.util.loadImage(wood2, function (img) {
    pol_1.setPatternFill({
      source: img,
      repeat: 'repeat'
    });
    pol_3.setPatternFill({
      source: img,
      repeat: 'repeat'
    });
    pol_2.setPatternFill({
      source: img,
      repeat: 'repeat'
    });
    canvas.renderAll();
  });
})();