modern-canvas

Features

- WebGL and WebGL2

- Animation

- Special effects

- Transition effects

- Describe element as you would a CSSStyle

📦 Install

``shell
npm i modern-canvas
`

🦄 Usage

`javascript
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

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

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

Transition effect

See all preset transitions

`typescript
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

`ts
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' },
}),
)
``