Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/franciscop/faster
Tiny function to repaint into a canvas in fullscreen mode
https://github.com/franciscop/faster
Last synced: 13 days ago
JSON representation
Tiny function to repaint into a canvas in fullscreen mode
- Host: GitHub
- URL: https://github.com/franciscop/faster
- Owner: franciscop
- License: mit
- Created: 2018-11-03T15:02:57.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-03T15:29:41.000Z (about 6 years ago)
- Last Synced: 2024-10-04T20:47:10.838Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://francisco.io/demo/zoom/
- Size: 61.5 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# faster-faster
Tiny function to repaint into a canvas in fullscreen mode. Just worry about your state and not about repainting manually:
```js
faster(({ ctx, width, height }) => {
...
});
```
## Getting started
Npm install:
```bash
npm install faster-faster
```
```js
import faster from 'faster-faster';
```
CDN:
```html
```
Will do:
- Change the width and height appropriately on window resize.
- Use `requestAnimationFrame` so that it slows down when the tab is not visible.
- Clear the canvas between repaints.
Properties:
- `canvas`: the canvas element itself.
- `ctx`: the active canvas context so that you can manipulate it as needed.
- `start`: the Date() of the first paint.
- `time`: the time relative to the `start` time in seconds.
- `width`: the canvas width as an integer.
- `height`: the canvas height as an integer.
- `index`: the paint counter.
You very likely need this CSS:
```css
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: black;
}
canvas {
background: black;
display: block;
}
```
Tip: making helpers for easier painting:
```js
const primitives = ctx => ({
arc: (x, y, size, options) => {
ctx.beginPath();
ctx.arc(x, y, size, 0, 2 * Math.PI);
for (let key in options) {
ctx[key] = options[key];
}
if (options.fillStyle) ctx.fill();
if (options.strokeStyle || options.lineWidth) ctx.stroke();
}
});
faster(({ ctx }) => {
const { arc } = primitives(ctx);
arc(10, 10, 10);
});
```