https://github.com/adakrei/stats-js
JS/TS Performance Monitor
https://github.com/adakrei/stats-js
pnpm stats typescript
Last synced: 3 months ago
JSON representation
JS/TS Performance Monitor
- Host: GitHub
- URL: https://github.com/adakrei/stats-js
- Owner: Adakrei
- License: mit
- Created: 2024-10-28T12:39:43.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-02T03:17:59.000Z (7 months ago)
- Last Synced: 2025-02-19T00:46:26.916Z (4 months ago)
- Topics: pnpm, stats, typescript
- Language: TypeScript
- Homepage: https://adakrei.github.io/Stats-JS/
- Size: 24.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stats-JS
[](https://www.npmjs.com/package/@adakrei/stats)
JS/TS Performance Monitor
## Installation
```bash
pnpm i @adakrei/stats
```
## Demo
[Basic](https://adakrei.github.io/Stats-JS/examples/basic.html)
[Custom](https://adakrei.github.io/Stats-JS/examples/custom.html)
[Stress](https://adakrei.github.io/Stats-JS/examples/stress.html)
## Usage
Here is a simple example to use Stats-JS
#### UMD
```html
let stats = new statsjs.Stats();
stats.showPanel(1);
document.body.appendChild(stats.dom);
let canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
document.body.appendChild(canvas);
let context = canvas.getContext('2d');
context.fillStyle = 'rgba(127,0,255,0.05)';
function animate() {
let time = performance.now() / 1000;
context.clearRect(0, 0, 512, 512);
stats.begin();
for (let i = 0; i < 2000; i++) {
let x = Math.cos(time + i * 0.01) * 196 + 256;
let y = Math.sin(time + i * 0.01234) * 196 + 256;
context.beginPath();
context.arc(x, y, 10, 0, Math.PI * 2, true);
context.fill();
}
stats.end();
requestAnimationFrame(animate);
}
animate();
```
#### ES Module
```ts
import { Stats } from '@adakrei/stats';
let stats = new Stats();
stats.showPanel(1);
//...
```