Pattern

by Balázs Baumgartner

HTML

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

CSS

#c {
    border: 1px solid #999;
}

Babel + JSX

const woodPattern = 'https://fchbackend.cheppers.com/sites/default/files/photos/578.png?zvi41q';
const handle = 'https://fchbackend.cheppers.com/sites/default/files/photos/Gino_negyzet.png?j8u93';
const doorHeight = 2100;
const doorWidth = 900;
const frameThickness = 50;

// Fabric initializing
fabric.Object.prototype.set({
  transparentCorners: false,
  cornerSize: 12,
});

const canvas = window._canvas = new fabric.Canvas('c');
canvas.setBackgroundColor('gainsboro');
const doorShape = new fabric.Rect({
  width: 1200,
  height: 2000,
  stroke: 'red',
  strokeWidth: 1,
  fill: '#29477F',
  left: frameThickness,
  top: frameThickness,
});

const createBorder = (left, top, height, width, pattern) => {
	const leftFrame = new fabric.Polygon(
    [
      { x: 0, y: 0 },
      { x: 0, y: height + frameThickness },
      { x: frameThickness, y: height },
      { x: frameThickness, y: frameThickness },
    ], {
      name: 'leftFrame',
      isDesignExtra: true,
      doorElement: 'frame',
      layerIndex: 10,
      left: 0,
      top: 0,
      angle: 0,
      fill: pattern,
    },
  );

  const topFrame = new fabric.Polygon(
    [
      { x: 0, y: 0 },
      { x: 0, y: width + (frameThickness * 2) },
      { x: frameThickness, y: width + frameThickness },
      { x: frameThickness, y: frameThickness },
    ], {
      name: 'topFrame',
      isDesignExtra: true,
      doorElement: 'frame',
      layerIndex: 10,
      left: width + (frameThickness * 2),
      top: 0,
      angle: 90,
      fill: pattern,
    },
  );

  const rightFrame = new fabric.Polygon([
    { x: frameThickness, y: 0 },
    { x: frameThickness, y: height + frameThickness },
    { x: 0, y: height },
    { x: 0, y: frameThickness }], {
    name: 'rightFrame',
    isDesignExtra: true,
    doorElement: 'frame',
    layerIndex: 10,
    left: width + frameThickness,
    top: 0,
    angle: 0,
    fill: pattern,
  },
  );
  
  const bottomFrame = new fabric.Polygon(
  	[
      { x: 0, y: frameThickness },
  ...