Function createRenderer

examples/traffic-intersection/src/renderer.ts:853–923

(canvas: HTMLCanvasElement)

 * @param canvas - The canvas element to draw into. Must support 2D context.
 */
export function createRenderer(canvas: HTMLCanvasElement): Renderer {
    const maybeCtx = canvas.getContext("2d");
    if (!maybeCtx) {
        throw new Error("[traffic-intersection] Failed to get 2D canvas context");
    }
    const ctx: CanvasRenderingContext2D = maybeCtx;
    let rafId = 0;
    let frameCount = 0;
    const vehicles = spawnVehicles();
    const pedestrians = spawnPedestrians();

    function frame(getCompositeState: () => string): void {
        frameCount++;
        const composite = getCompositeState();
        const signals = getSignalStates(composite);

        // --- Update ---
        const aheadMap = computeVehicleAheadPositions(vehicles);
        for (const v of vehicles) {
            const vSig = vehicleSignalForDirection(v.direction, signals);
            updateVehicle(v, vSig, aheadMap.get(v) ?? null);
        }
        for (const ped of pedestrians) {
            const pSig = pedSignalForCrosswalk(ped.crosswalk, signals);
            updatePedestrian(ped, pSig);
        }

        // --- Draw ---
        drawGround(ctx);
        drawRoads(ctx);
        drawLaneMarkings(ctx);
        drawCrosswalks(ctx);
        drawStopLines(ctx);

        for (const v of vehicles) {
            drawVehicle(ctx, v);
        }
        for (const ped of pedestrians) {
            drawPedestrian(ctx, ped);
        }

        // Vehicle signals — one per phase, on opposite corners
        drawVehicleSignal(ctx, VEHICLE_SIGNAL_POSITIONS.ns, signals.nsVehicle);
        drawVehicleSignal(ctx, VEHICLE_SIGNAL_POSITIONS.ew, signals.ewVehicle);

        // Pedestrian signals — ns crosswalks use ewPed, ew crosswalks use nsPed
        // (ns crosswalks cross the N/S road, safe when E/W phase is active)
        drawPedSignal(ctx, PED_SIGNAL_POSITIONS["ns-top"], signals.ewPed, frameCount);
        drawPedSignal(ctx, PED_SIGNAL_POSITIONS["ns-bottom"], signals.ewPed, frameCount);
        drawPedSignal(ctx, PED_SIGNAL_POSITIONS["ew-left"], signals.nsPed, frameCount);
        drawPedSignal(ctx, PED_SIGNAL_POSITIONS["ew-right"], signals.nsPed, frameCount);

        rafId = requestAnimationFrame(() => frame(getCompositeState));
    }

    return {
        start(getCompositeState: () => string): void {
            if (rafId !== 0) {