Flexium Canvas


Canvas and interactive modules for Flexium - WebGL, keyboard, mouse, and game loop.

Installation

``bash
npm install flexium-canvas flexium
`

Features

- Canvas Rendering - 2D and WebGL canvas support
- Keyboard Input - Reactive keyboard state management
- Mouse Input - Mouse position, buttons, and events
- Game Loop - Fixed timestep game loop with delta time

Usage

$3

`tsx
import { Canvas } from 'flexium-canvas/dom'

function Game() {
return (
width={800}
height={600}
onDraw={(ctx) => {
ctx.fillStyle = 'blue'
ctx.fillRect(100, 100, 50, 50)
}}
/>
)
}
`

$3

`tsx
import { useKeyboard } from 'flexium-canvas/interactive'

function Player() {
const keyboard = useKeyboard()

if (keyboard.isPressed('ArrowLeft')) {
// Move left
}
if (keyboard.isPressed('Space')) {
// Jump
}
}
`

$3

`tsx
import { useMouse } from 'flexium-canvas/interactive'

function Cursor() {
const mouse = useMouse()

return (



)
}
`

$3

`tsx
import { useGameLoop } from 'flexium-canvas/interactive'

function Game() {
useGameLoop((delta) => {
// Update game state
player.x += velocity * delta
})
}
`

Package Structure

`
flexium-canvas
├── / # Core canvas utilities
├── /dom # Canvas component for DOM
└── /interactive # Keyboard, mouse, game loop
``

Requirements

- Flexium >= 0.15.0

License

MIT