The tradtional way to do this is to set
```js
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, centerX, centerY);
```
For various reasons this doesn't actually draw "in the center".
Instead we have to measure the text using the canvas API and then
center ourselves.
```
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
const m = ctx.measureText(text);
ctx.fillText(
text,
(canvas.width - m.actualBoundingBoxRight + m.actualBoundingBoxLeft) / 2,
(canvas.height - m.actualBoundingBoxDescent + m.actualBoundingBoxAscent) / 2
);
```
And, make it discard negative values.
The spec says timestamp query can return a beginning timestamp
with a value greater than an ending timestamp and such values
should be discarded.
The easiest place to do this is in the RollingAverage class but
just doing it there without renaming it seemed bad since someone
might use RollingAverage for other purposes and not realize it
was discarding negative values.
Further, it's possible offsite samples are linking directly to
rolling-timing.js (which is the case if you export any sample)
so leave that implementation as is and put NonNegativeRollingAverage
in its own file.
