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](./src/scene/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](./src/scene/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' },
}),
)
```