API Reference

BodygramSDKDrawUtils ships as a separate package from the main Headless SDK and exposes four draw methods plus a small set of supporting types. This page is the canonical reference — the per-method how-tos under DrawUtils link here for full signatures.

For globals shared with the rest of the Headless SDK (locales, supported response shapes, measurement names) this page links out to the Headless SDK API reference rather than duplicating the tables.

Initialization

const utils = new BodygramSDKDrawUtils({
  locale: 'en', // optional — defaults to 'en'
});

The constructor performs no I/O — it only stores the config. Network and DOM work happens lazily when you call a draw method.

drawAvatar(response, options)

Renders the bare 3D avatar mesh from any supported estimation response. No overlays.

When to use: When you want the avatar by itself — no measurement rings, no posture lines.

drawAvatar(
  response:
    | BodygramScannerPlatformEstimationResponse
    | Body2FitEstimationResponse,
  options: DrawOptions,
): HTMLElement

const utils = new BodygramSDKDrawUtils({ locale: 'en' });

const response = await sdk.getBodygramScannerPlatformPhotoEstimation({ /* … */ });

utils.drawAvatar(response, { container: 'avatar' });

Parameters

Returns

The rendered <bgwc-avatar-canvas> DOM node. Even when options.container is null, the node is still returned so you can mount or further manipulate it.

Throws

• When the response is missing avatar data — for Bodygram Scanner Platform that means entry.avatar is absent; for Body2Fit that means estimations.glb is absent (the request was made without the GLB output).

drawAvatarWithRingsAndIndicators(response, ringsAndIndicatorsOptions, options)

Renders the avatar with measurement rings (circular bands at each girth) and labeled value indicators. The numeric value and unit for each indicator are looked up from the response's measurements array — you only declare which measurements to surface.

When to use: When you want to surface specific girth measurements visually on the avatar.

drawAvatarWithRingsAndIndicators(
  response:
    | BodygramScannerPlatformEstimationResponse
    | Body2FitEstimationResponse,
  ringsAndIndicatorsOptions: AvatarWithRingsAndIndicatorsOptions,
  options: DrawOptions,
): HTMLElement

const utils = new BodygramSDKDrawUtils({ locale: 'en' });

utils.drawAvatarWithRingsAndIndicators(
  response,
  {
    rings: [
      { name: 'bustGirth' },
      { name: 'waistGirth' },
      { name: 'hipGirth' },
    ],
    indicators: [
      { name: 'bustGirth' },
      { name: 'waistGirth' },
      { name: 'hipGirth' },
    ],
    showDebugRings: false,
    templateID: 'default',
  },
  { container: 'avatar' },
);

Parameters

Returns

The rendered <bgwc-avatar-canvas-with-rings-and-indicators> DOM node.

Throws

• When the response is not a recognized Bodygram Scanner Platform or Body2Fit estimation response.
• When the response is missing avatar data.
• When a requested indicator's measurement is absent from the response's measurements array — DrawUtils can't render an indicator without a value/unit.

drawFrontPosture(response, options)

Renders the avatar with front-view posture overlay lines (shoulder, hip, ear-tilt).

When to use: When the user has captured a photo scan and you want to surface their front posture analysis.

drawFrontPosture(
  response: BodygramScannerPlatformPhotoEstimationResponse,
  options: DrawOptions,
): HTMLElement

utils.drawFrontPosture(response, { container: 'front-posture' });

Parameters

DrawUtils reads three angles — ear, shoulder, and topHip — out of entry.posture.front.angles. The foot angle is intentionally ignored (the front avatar canvas does not consume it). Missing angles default to 0.

Returns

The rendered <bgwc-avatar-canvas-with-front-posture-lines> DOM node.

Throws

• When the response is not a valid Bodygram Scanner Platform photo estimation response — stats-based responses have posture: null and are not supported.
• When the response is missing avatar data.

drawSidePosture(response, options)

Renders the avatar with right-side posture overlay (the body line, four angles).

When to use: Same as drawFrontPosture — typically called alongside it to render front and side views together.

drawSidePosture(
  response: BodygramScannerPlatformPhotoEstimationResponse,
  options: DrawOptions,
): HTMLElement

utils.drawSidePosture(response, { container: 'side-posture' });

Parameters

DrawUtils extracts the four-angle bodyLine segment from entry.posture.right.angles and feeds it into the side avatar canvas. If bodyLine is missing, no posture data is rendered (treat that case as "no analysis available").

Returns

The rendered <bgwc-avatar-canvas-with-side-posture-lines> DOM node.

Throws

• When the response is not a valid Bodygram Scanner Platform photo estimation response.
• When the response is missing avatar data.

Supported response methods

Each draw method accepts the response envelope from one or more SDK estimation methods. The table below summarizes what's compatible with what.

DrawUtils normalizes the avatar format internally — Bodygram Scanner Platform responses arrive as a base64-encoded .obj, Body2Fit responses arrive as a .glb URL. Your call site stays the same regardless of source.

DrawUtilsConfig

Passed to the BodygramSDKDrawUtils constructor.

type DrawUtilsConfig = {
  locale?: string;
};

DrawOptions

Mount and presentation options accepted by every draw method.

type DrawOptions = {
  container?: HTMLElement | string | null;
  styles?: Partial<CSSStyleDeclaration>;
  enableControls?: boolean;
};

container resolution

AvatarWithRingsAndIndicatorsOptions

Accepted by drawAvatarWithRingsAndIndicators.

type AvatarWithRingsAndIndicatorsOptions = {
  rings: RingOptions[];
  indicators: DrawIndicatorInput[];
  showDebugRings: boolean;
  templateID: string;
};

RingOptions

type RingOptions = {
  name: RingMeasurementName;
  color?: string;
};

DrawIndicatorInput

type DrawIndicatorInput = {
  name: RingMeasurementName;
  side?: 'left' | 'right';
  showLine?: boolean;
};

You only specify the measurement name — the numeric value and unit are pulled from the response's measurements array. If a requested indicator's measurement is missing from the response, drawAvatarWithRingsAndIndicators throws.

RingMeasurementName

The set of measurement names the ring/indicator overlay supports. Each one maps to a Bodygram Scanner Platform measurement name (camelCase) and a Body2Fit estimationType (UPPER_SNAKE_CASE).

type RingMeasurementName =
  | 'bustGirth'
  | 'waistGirth'
  | 'hipGirth'
  | 'thighGirthR'
  | 'calfGirthR'
  | 'upperArmGirthR';

For the full set of measurement names returned by the SDK (not just the ring-supported subset), see PlatformMeasurement and the Body2Fit Measurements tables.

Supported Locales

DrawUtils accepts the same locale codes as the rest of the Headless SDK. See Supported Locales for the full list — there's no duplication here so the canonical table stays in one place.