modern-canvas

📦 Install

npm i modern-canvas

🦄 Usage

import { Animation2D, Engine, Image2D, Text2D } from 'modern-canvas'
import { fonts } from 'modern-font'

async function loadFallbackFont() {
  fonts.fallbackFont = await fonts.load({ family: 'fallbackFont', src: '/fallback.woff' })
}

loadFallbackFont().then(() => {
  const engine = new Engine({ width: 500, height: 500 }).start()

  engine.root.addChild(
    new Image2D({
      style: {
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        rotate: 30,
        opacity: 0.5,
        backgroundColor: '#00FF00',
        filter: 'brightness(102%) contrast(90%) saturate(128%) sepia(18%)',
      },
      src: '/example.png',
    })
      .addChild(
        new Text2D({
          fonts,
          style: {
            fontSize: 30,
          },
          content: '/example.png',
        }),
      )
      .addChild(
        new Animation2D({
          duration: 3000,
          loop: true,
          keyframes: [
            { offset: 1, rotate: 180 },
          ],
        }),
      )
  )

  console.log(engine)

  document.body.append(engine.view)
})