A variant of canvas-fit that handles some extra magic for you: adjusting the scale of the canvas to maintain smooth framerates.
As of version
2.x.x, the approach for scaling has changed slightly to make
it more predictable.
resize function you can use to update the size of the canvas to
fit within its parent element. Takes the following options:
parent: the parent element to fit within. Defaults to the canvas' parent element.
scales: an array of scales to attempt. Defaults to
[0.25, 0.5, 1, devicePixelRatio].
target: a two-element array containing the target framerates – the first element is the maximum rate before reducing scale, and the second is the minimum before increasing it again. Defaults to
fps: a custom function that should return the current framerate. Optional.
gap: the amount of frames to wait between rescales. Defaults to 60.
auto: automatically resize/rescale the canvas in response to window resizes and framerate changes respectively. Defaults to
true, set to
sensitivity: the amount of sensitivity for canvas rescales. Set to
0to ignore rescales, and
1to make them immediate. It's recommended you choose a figure around
0.01, which is the default.
updated is called every time the canvas size is changed – pass your render
function in here to avoid the screen flickering every time your canvas is
If you're using
auto: false, call this method once per frame to check the
canvas' framerate and update the scale accordingly.
Read-only property to get the current scale of the canvas.
The most recent framerate captured.
Manually trigger a resize of the canvas. Useful, for example, when resizing the screen.
MIT. See LICENSE.md for details.