Function drawFrameGraph

packages/debug-plugin/src/graphs.js:43–96

(
	canvas,
	updateHistory,
	drawHistory,
	historyIndex,
	peakEl,
)

 * @param {HTMLElement} peakEl - element to display peak value
 */
export function drawFrameGraph(
	canvas,
	updateHistory,
	drawHistory,
	historyIndex,
	peakEl,
) {
	const g = prepareGraph(canvas);
	if (g === null) {
		return;
	}
	const { ctx, w, h, barW } = g;

	let peak = 1;
	for (let i = 0; i < GRAPH_SAMPLES; i++) {
		const total = updateHistory[i] + drawHistory[i];
		if (total > peak) {
			peak = total;
		}
	}
	peak = roundPeak(peak);
	peakEl.textContent = `peak ${peak}ms`;

	// target frame time line (e.g. 16.67ms for 60fps)
	const targetMs = 1000 / timer.maxfps;
	const targetY = h - (targetMs / peak) * h;
	if (targetY > 0 && targetY < h) {
		ctx.strokeStyle = "rgba(40,80,140,0.5)";
		ctx.setLineDash([2, 2]);
		ctx.beginPath();
		ctx.moveTo(0, targetY);
		ctx.lineTo(w, targetY);
		ctx.stroke();
		ctx.setLineDash([]);
	}

	// stacked bars: draw (amber) on bottom, update (cyan) on top
	for (let i = 0; i < GRAPH_SAMPLES; i++) {
		const idx = (historyIndex + i) % GRAPH_SAMPLES;
		const updateH = (updateHistory[idx] / peak) * h;
		const drawH = (drawHistory[idx] / peak) * h;
		const x = Math.round(i * barW);
		const bw = Math.max(1, Math.round((i + 1) * barW) - x);

		if (drawH > 0) {
			ctx.fillStyle = "#ffb800";
			ctx.fillRect(x, h - drawH - updateH, bw, drawH);
		}
		if (updateH > 0) {
			ctx.fillStyle = "#00e0ff";
			ctx.fillRect(x, h - updateH, bw, updateH);
		}
	}
}

/**
 * Draw the memory heap area graph.