@antv/x6/src/registry/background/flip-y.ts

JavaScript diagramming library that uses SVG and HTML for rendering

import type { BackgroundDefinition } from './index'

export const flipY: BackgroundDefinition = (img) => {
  // d d
  // q q

  const canvas = document.createElement('canvas')
  const width = img.width
  const height = img.height

  canvas.width = width
  canvas.height = height * 2

  const ctx = canvas.getContext('2d')!
  // top image
  ctx.drawImage(img, 0, 0, width, height)
  // flipped bottom image
  ctx.translate(0, 2 * height)
  ctx.scale(1, -1)
  ctx.drawImage(img, 0, 0, width, height)

  return canvas
}