faster-faster
Tiny function to repaint into a canvas in fullscreen mode. Just worry about your state and not about repainting manually:
;
Getting started
Npm install:
npm install faster-faster
;
CDN:
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 thestart
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:
Tip: making helpers for easier painting:
const primitives = { ctx; ctx; for let key in options ctxkey = optionskey; if optionsfillStyle ctx; if optionsstrokeStyle || optionslineWidth ctx; }; ;