https://github.com/voxylu/vancas
A nice wrapper for the html canvas.
https://github.com/voxylu/vancas
canvas canvas2d html5 p5js processing wrapper wrapper-library
Last synced: 27 days ago
JSON representation
A nice wrapper for the html canvas.
- Host: GitHub
- URL: https://github.com/voxylu/vancas
- Owner: Voxylu
- Created: 2019-02-25T14:59:38.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T15:00:52.000Z (about 3 years ago)
- Last Synced: 2025-08-21T04:39:02.018Z (7 months ago)
- Topics: canvas, canvas2d, html5, p5js, processing, wrapper, wrapper-library
- Language: TypeScript
- Homepage: https://npm.im/vancas
- Size: 1.73 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vancas
> A nice wrapper for the html canvas.
## Usage
For more examples look in the `examples` directory.
```typescript
// Import vancas
import { createVancas } from 'vancas'
// Create an instance
const vancas = createVancas({ width: 500, height: 500 })
// Insert the canvas in the DOM
document.body.appendChild(vancas.canvasEl)
// Object for the player position
const player = {
x: 250,
y: 250,
}
// Update is called before the render
vancas.update = (delta) => {
// Multiplying by `delta` make you sure that x will be incremented by 10 every second
player.x += 10 * delta
}
// Render is used to draw on the canvas
vancas.render = () => {
vancas.clear()
vancas.background('grey')
vancas.circle({ x: player.x, y: player.y, radius: 10, color: 'red' })
}
// Start the main loop (update & render)
vancas.start()
```
## Api
W.I.P.