Features

• WebGL and WebGL2

• Animation

• Special effects

• Transition effects

• Describe element as you would a CSSStyle

📦 Install

npm i modern-canvas

🦄 Usage

import { Animation, Element2D, Engine } 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.appendChild(
    new Element2D({
      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%)',
      },
      foreground: { image: '/example.png' },
    }, [
      new Animation({
        duration: 3000,
        loop: true,
        keyframes: [
          { offset: 1, rotate: 180 },
        ],
      }),
      new Element2D({
        style: {
          fontSize: 30,
        },
        text: {
          fonts,
          content: '/example.png',
        },
      }),
    ])
  )

  console.log(engine)

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

Special effect

See all preset special effects

import { EmbossEffect, Element2D } from 'modern-canvas'

engine.root.appendChild(
  new Element2D({
    foreground: { image: '/example.png' },
  }, [
    new EmbossEffect(),
  ])
)

Transition effect

See all preset transitions

import { Element2D, TiltShiftTransition } from 'modern-canvas'

engine.root.appendChild(
  new Element2D({
    foreground: { image: '/example.png' },
  }),
  new TiltShiftTransition(),
  new Element2D({
    foreground: { image: '/example.gif' },
  }),
)

Use https://github.com/gl-transitions/gl-transitions with vite

import bounceGLSL from 'gl-transitions/transitions/Bounce.glsl?raw'
import { Element2D, Transition } from 'modern-canvas'

engine.root.appendChild(
  new Element2D({
    foreground: { image: '/example.png' },
  }),
  new Transition({ glsl: bounceGLSL }),
  new Element2D({
    foreground: { image: '/example.gif' },
  }),
)