script.js

const DESIGN_SIZE = { width: 760, height: 400 }
const COLORS = {
  ink: '#17181b',
  muted: '#686a71',
  paper: '#fffdf7',
  blue: '#5557e8',
  lime: '#d7f26d',
  white: '#ffffff',
}
const OBJECT_NAMES = { title: 'title', card: 'card', accent: 'accent' }
const ADD_OFFSET = 22
const MAX_ADDED_OBJECTS = 6
const EXPORT_SCALE = 2

const canvasElement = document.querySelector('#fabric-canvas')
const canvasWrap = document.querySelector('.canvas-wrap')
const statusElement = document.querySelector('#canvas-status')

if (canvasElement && canvasWrap && window.fabric) {
  const canvas = new fabric.Canvas(canvasElement, {
    preserveObjectStacking: true,
    selectionColor: 'rgba(85, 87, 232, 0.08)',
    selectionBorderColor: COLORS.blue,
  })

  const background = new fabric.Rect({
    left: 0,
    top: 0,
    width: DESIGN_SIZE.width,
    height: DESIGN_SIZE.height,
    fill: COLORS.paper,
    selectable: false,
    evented: false,
  })
  const card = new fabric.Rect({
    name: OBJECT_NAMES.card,
    left: 38,
    top: 38,
    width: 684,
    height: 324,
    rx: 22,
    ry: 22,
    fill: COLORS.blue,
  })
  const accent = new fabric.Circle({
    name: OBJECT_NAMES.accent,
    left: 557,
    top: 80,
    radius: 56,
    fill: COLORS.lime,
  })
  const kicker = new fabric.Text('REACT × FABRIC.JS', {
    left: 84,
    top: 92,
    fontFamily: 'monospace',
    fontSize: 15,
    fontWeight: 'bold',
    charSpacing: 80,
    fill: COLORS.lime,
  })
  const title = new fabric.Textbox('Make the canvas\nyour product.', {
    name: OBJECT_NAMES.title,
    left: 80,
    top: 132,
    width: 490,
    fontFamily: 'Arial',
    fontSize: 48,
    fontWeight: 'bold',
    lineHeight: 0.96,
    fill: COLORS.white,
  })
  const footer = new fabric.Text('react-fabricjs.com', {
    left: 84,
    top: 318,
    fontFamily: 'Arial',
    fontSize: 14,
    fill: 'rgba(255,255,255,0.75)',
  })

  canvas.add(background, card, accent, kicker, title, footer)
  canvas.setActiveObject(title)
  canvas.requestRenderAll()

  function resizeCanvas() {
    const width = canvasWrap.clientWidth
    const height = width * DESIGN_SIZE.height / DESIGN_SIZE.width
    canvas.setDimensions({ width, height })
    canvas.setZoom(width / DESIGN_SIZE.width)
    canvas.requestRenderAll()
  }

  function setStatus(message) {
    statusElement.textContent = message
  }

  function selectObject(name) {
    const object = canvas.getObjects().find((candidate) => candidate.name === name)
    if (!object) return
    canvas.setActiveObject(object)
    canvas.requestRenderAll()
    setStatus(`${name[0].toUpperCase()}${name.slice(1)} selected`)
  }

  function syncLayerSelection() {
    const selectedName = canvas.getActiveObject()?.name
    document.querySelectorAll('[data-select]').forEach((button) => {
      button.classList.toggle('is-active', button.dataset.select === selectedName)
    })
  }

  function nextPosition() {
    const addedCount = canvas.getObjects().filter((object) => object.data?.added).length
    const offset = (addedCount % MAX_ADDED_OBJECTS) * ADD_OFFSET
    return { left: 250 + offset, top: 150 + offset }
  }

  document.querySelector('[data-action="add-text"]')?.addEventListener('click', () => {
    const text = new fabric.IText('Edit me', {
      ...nextPosition(),
      data: { added: true },
      fontFamily: 'Arial',
      fontSize: 32,
      fontWeight: 'bold',
      fill: COLORS.ink,
    })
    canvas.add(text).setActiveObject(text)
    text.enterEditing()
    text.selectAll()
    setStatus('Text added — start typing')
  })

  document.querySelector('[data-action="add-shape"]')?.addEventListener('click', () => {
    const shape = new fabric.Rect({
      ...nextPosition(),
      data: { added: true },
      width: 110,
      height: 80,
      rx: 14,
      ry: 14,
      fill: COLORS.lime,
    })
    canvas.add(shape).setActiveObject(shape)
    setStatus('Shape added')
  })

  document.querySelector('[data-action="delete"]')?.addEventListener('click', () => {
    const selected = canvas.getActiveObjects().filter((object) => object !== background)
    if (!selected.length) return setStatus('Select an object first')
    selected.forEach((object) => canvas.remove(object))
    canvas.discardActiveObject().requestRenderAll()
    setStatus('Object deleted')
  })

  document.querySelector('[data-action="export"]')?.addEventListener('click', () => {
    canvas.discardActiveObject().requestRenderAll()
    const link = document.createElement('a')
    link.download = 'react-fabricjs-demo.png'
    link.href = canvas.toDataURL({ format: 'png', multiplier: EXPORT_SCALE })
    link.click()
    setStatus('PNG exported')
  })

  document.querySelectorAll('[data-select]').forEach((button) => {
    button.addEventListener('click', () => selectObject(button.dataset.select))
  })

  canvas.on('selection:created', syncLayerSelection)
  canvas.on('selection:updated', syncLayerSelection)
  canvas.on('selection:cleared', syncLayerSelection)
  new ResizeObserver(resizeCanvas).observe(canvasWrap)
  resizeCanvas()
} else if (statusElement) {
  statusElement.textContent = 'The live canvas could not load. Try refreshing the page.'
}

document.querySelector('[data-copy]')?.addEventListener('click', async (event) => {
  const button = event.currentTarget
  await navigator.clipboard.writeText(button.dataset.copy)
  button.textContent = 'Copied'
  window.setTimeout(() => { button.textContent = 'Copy' }, 1600)
})