Origin Point Location in Matter.js Canvas

In Matter.js, the origin point (0, 0) is located at the top-left corner of the canvas. This coordinate system follows the standard HTML5 Canvas convention, where the horizontal X-axis increases to the right and the vertical Y-axis increases downward. Understanding this layout is essential for positioning bodies, applying forces, and configuring constraints accurately within your 2D physics world.

The Matter.js Coordinate System

Matter.js relies on the standard computer graphics screen coordinate system rather than a Cartesian coordinate plane:

• Origin (0, 0): Positioned at the extreme top-left corner of the rendered view.
• X-Axis: Values increase as you move horizontally to the right across the screen.
• Y-Axis: Values increase as you move vertically downward toward the bottom of the screen.

Because the Y-axis points downward, gravity in Matter.js is defined as a positive vertical value by default (usually engine.gravity.y = 1). This pulls objects toward the bottom of the screen.

How Rigid Body Positions Work

While the canvas origin is at the top-left, the position vector of a rigid body (body.position) does not refer to the body's top-left corner. Instead, a body's position represents its center of mass (typically its geometric center).

For example, if you create a rectangle with a width of 100 pixels and a height of 100 pixels at coordinates (50, 50):

const box = Bodies.rectangle(50, 50, 100, 100);

The center of the box will sit at (50, 50), causing the top-left corner of the box to align directly with the canvas origin at (0, 0).

Viewport and Render Bounds

If you use the built-in Matter.Render module, the visible origin might appear to move if you adjust camera bounds using Render.lookAt or modify render.bounds. However, this only alters the viewport perspective. The underlying physics engine retains its absolute origin at (0, 0) in world space.