diff --git a/life.ts b/life.ts index 2ba6d1d..ed1ae26 100644 --- a/life.ts +++ b/life.ts @@ -1,5 +1,9 @@ const SCALE = 4; +const times: number[] = []; +let fps: number; + + function init() { const canvas = document.getElementById("canvas") as HTMLCanvasElement | null; if (!canvas) throw new Error("unable to get canvas HTML element"); @@ -63,6 +67,20 @@ function update(ctx: CanvasRenderingContext2D, cells: number[], state: number[]) } ctx.fill(); // draw only once per frame + const now = performance.now(); + while (times.length > 0 && times[0] <= now - 1000) { + times.shift(); + } + times.push(now); + fps = times.length; + + ctx.save(); + ctx.fillStyle = "red"; + ctx.font = "bold 48px sans-serif"; + ctx.shadowColor = "white"; + ctx.fillText("" + fps, 10, 50); + ctx.restore(); + window.requestAnimationFrame(t => update(ctx, cells, state)); }