How to Hide Constraints in Matter.js

This article explains how to make constraints invisible when using the built-in Matter.js renderer. You will learn the exact property to configure when creating a constraint, how to toggle visibility dynamically on an existing constraint, and how to hide constraints globally through the renderer settings.

Hiding an Individual Constraint

The most direct way to make a constraint invisible is to set its render.visible property to false. You can define this directly inside the constraint configuration options when creating it:

const invisibleConstraint = Matter.Constraint.create({
    bodyA: bodyA,
    bodyB: bodyB,
    length: 100,
    stiffness: 0.9,
    render: {
        visible: false
    }
});

Matter.Composite.add(world, invisibleConstraint);

By default, Matter.js renders constraints as lines between bodies or points. Setting visible: false stops the built-in Matter.Render module from drawing the constraint while keeping its physical behavior completely intact.

Toggling Visibility Dynamically

If the constraint is already created and added to the physics world, you can modify the visible property directly on the constraint instance at runtime:

// Hide the constraint
myConstraint.render.visible = false;

// Show the constraint again
myConstraint.render.visible = true;

This is useful for mechanics like drawing an interactive elastic band or rope that disappears once released or cut.

Disabling Constraints Globally in the Renderer

If you want to prevent the renderer from drawing any constraints across your entire simulation, you can configure the Matter.Render instance options:

const render = Matter.Render.create({
    element: document.body,
    engine: engine,
    options: {
        width: 800,
        height: 600,
        showConstraints: false
    }
});

Setting showConstraints: false overrides individual settings and suppresses the rendering of all constraints in that canvas context.