Difference Between pointA and offsetA in Matter.js

This article provides a concise overview of how anchor points and offsets function within Matter.js constraints. It clarifies the exact role of the native pointA property, explains why offsetA is commonly referenced in physics setups, and breaks down how coordinates are calculated depending on whether a constraint is attached to a moving body or fixed to the world canvas.

Understanding pointA in Matter.js

In standard Matter.js, pointA is a native property of a Constraint. It defines where the constraint connects relative to the first body (bodyA).

The behavior of pointA depends entirely on whether bodyA is provided:

• When bodyA is defined: pointA acts as a local offset relative to bodyA.position (the body's center of mass). For example, { x: 0, y: -20 } attaches the constraint 20 pixels above the center of bodyA.
• When bodyA is null: pointA acts as an absolute world coordinate. For example, { x: 100, y: 100 } anchors the constraint to fixed canvas coordinates (100, 100).

// Native Matter.js constraint
const constraint = Matter.Constraint.create({
    bodyA: myBody,
    pointA: { x: 10, y: 0 }, // Local offset 10px to the right of myBody.position
    pointB: { x: 400, y: 200 } // Fixed world anchor if bodyB is omitted/null
});

What is offsetA?

offsetA is not an official property in the native Matter.js core engine. Instead, it appears in engine wrappers (such as game engines using Matter.js as their backend, like Phaser), custom utility libraries, or developer code.

Because pointA dynamically shifts between world coordinates and local offsets depending on the presence of bodyA, developers and wrapper libraries often introduce offsetA to make intentions explicit. When present in an API or custom implementation, offsetA strictly represents the relative vector from the center of bodyA, preventing accidental interpretation as a global world coordinate.

Summary of Differences

• API Presence: pointA is native to Matter.js; offsetA is non-standard and exists only in third-party abstractions or custom helpers.
• Coordinate System: pointA is contextual—it represents a local offset when attached to a body, but an absolute world vector when unattached. offsetA is explicitly a local offset relative to the body’s center of mass.
• Usage in Core Matter.js: To set a local anchor offset on bodyA, you must assign that offset vector to pointA.