How to use the fabric.fabric.StaticCanvas function in fabric

export default (gridSize, offsetX, offsetY) => {
  // Correct for high-DPI devices
  const size = gridSize / window.devicePixelRatio

  // FIXME: Non-integer values break things
  console.log('Background grid size', size)

  // Create a single tile
  const backgroundTile = new fabric.StaticCanvas()
  backgroundTile.setDimensions({
    width: size, height: size,
  })

  // The grid needs to be filled in all four corners,
  // for one pixel each
  Array(4).fill().forEach((_, i) => {
    const [x, y] = [i % 2 * size, Math.floor(i / 2) * size]
    backgroundTile.add(new fabric.Rect({
      width: 1, height: 1,
      // FIXME: This is a hack, and it breaks down
      // when adding window scaling
      left: x - 1 + (offsetX / window.devicePixelRatio),
      top: y - 1 + (offsetY / window.devicePixelRatio),
      fill: 'rgba(0, 0, 0, 0.125)',
    }))

export default (width, height, viewPort) => {
  const overlay = new fabric.StaticCanvas()
  overlay.setDimensions({
    width: width + 20, height: height + 20,
  })

  // Transform coordinate system
  overlay.setViewportTransform([
    1, 0, 0, 1,
    width/2 + 10, height/2 + 10
  ])

  // Draw viewport margin ------------------------------------------------------
  const vp = new fabric.Path(
    `M ${ -width/2 - 10 } ${ -height/2 - 10 } ` +
    `L ${ -width/2 - 10 } ${ +height/2 + 10 } ` +
    `L ${ +width/2 + 10 } ${ +height/2 + 10 } ` +
    `L ${ +width/2 + 10 } ${ -height/2 - 10 } ` +

componentDidMount() {
    console.log('componentDidMount');
    const { width, height } = this.props;
    const page = new fabric.StaticCanvas(this.refs.canvas, {
      width,
      height,
    });

    let hexagon1 = new fabric.Polygon(points, assign({}, commonCfg, {
      left: 100,
      top: 160,
    }));

    let hexagon2 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 490,
      top: -108,
      opacity: 0,
    }));

    let hexagon3 = new fabric.Polygon(deepcopy(points), commonCfg);

numberOpacity: 0.8,
    unitColor: '#E5EEFF',
    unitOpacity: 0.5,
    labelColor: '#fff',
    labelOpacity: 0.55,
  }

  const width = 624
  const height = 350
  const pad = 5
  const wideBy = 25

  const selectedTheme = theme === 'light' ? lightTheme : darkTheme
  fabric.devicePixelRatio = 1.5

  const canvas = new fabric.StaticCanvas('c', {
    backgroundColor: selectedTheme.backgroundColor,
    width: wide ? width + wideBy : width,
    height: height
  })

  const x0 = wide ? wideBy / 2 : 0

  const separatorOptions = {
    stroke: selectedTheme.separatorColor,
    strokeWidth: 0.5,
    opacity: selectedTheme.separatorOpacity,
  }

  const lineTopHorizontal = new fabric.Line([x0, 91, width, 91], separatorOptions)
  const lineCenterVertical = new fabric.Line(
    [width / 2, 91, width / 2, height],