modern-canvas

Features

• WebGL and WebGL2

• Animation

• Special effects

• Transition effects

• Describe element as you would a CSSStyle

📦 Install

npm i modern-canvas

🦄 Usage

import { Animation, Engine, Image2D, Text2D, Video2D } 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 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',
    }, [
      new Animation({
        duration: 3000,
        loop: true,
        keyframes: [
          { offset: 1, rotate: 180 },
        ],
      }),
      new Text2D({
        fonts,
        style: {
          fontSize: 30,
        },
        content: '/example.png',
      }),
      new Video2D({
        style: {
          left: 200,
          top: 200,
          width: 100,
          height: 100,
          maskImage: '/example.png',
        },
        src: '/example.mp4',
      }),
    ])
  )

  console.log(engine)

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

Special effect

See all preset special effects

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

engine.root.appendChild(
  new Image2D({
    src: '/example.png',
  }, [
    new EmbossEffect(),
  ])
)

Transition effect

See all preset transitions

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

engine.root.appendChild(
  new Image2D({
    src: '/example.png',
  }),
  new TiltShiftTransition(),
  new Image2D({
    src: '/example.gif',
  }),
)

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

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

engine.root.appendChild(
  new Image2D({
    src: '/example.png',
  }),
  new Transition({ glsl: bounceGLSL }),
  new Image2D({
    src: '/example.gif',
  }),
)