# packages/core/src/features/physics/lib/2d/canvas/debug.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/physics/lib/2d/canvas/debug.ts#L28). [Back to reference](/reference/functions/physics-2d/)

1 import { definePrimitive } from "@pibbl/core";
2 import { pibblInternalCurrentWorldTransform } from "@pibbl/core/internal";
3 import type { PibblPhysicsWorldHandle2D } from "../types.js";
4 import { requirePhysicsWorld2DController } from "../runtime/controller.js";
5 
6 /**
7  * Authored inputs for PhysicsDebug2D, including the declared data and presentation options.
8  *
9  * @see {@link PibblPhysicsWorldHandle2D}
10  * @see {@link PhysicsDebug2D}
11  */
12 export interface PibblPhysicsDebug2DProps {
13   /** World identity whose state is queried or drawn. See {@link PibblPhysicsWorldHandle2D}. */
14   readonly world: PibblPhysicsWorldHandle2D;
15   /** Color used by the mark or effect. See {@link PibblPhysicsDebug2DProps}. */
16   readonly color?: string;
17 }
18 
19 /**
20  * Read-only authoritative bounds, mass centers and contact normals; no hit targets.
21  *
22  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
23  * props and style types.
24  * @throws When called directly; Pibbl mounts this component through JSX or createElement.
25  *
26  * @see {@link PibblPhysicsDebug2DProps}
27  */
28 export const PhysicsDebug2D = definePrimitive<PibblPhysicsDebug2DProps>(
29   (props, _style, context) => {
30     props.world.revision.get();
31     const controller = requirePhysicsWorld2DController(props.world);
32     const snapshot = controller.inspect();
33     const transform = pibblInternalCurrentWorldTransform()
34       .inverse()
35       .multiply(controller.rootTransform(new DOMMatrix()));
36     context.save();
37     try {
38       context.transform(
39         transform.a,
40         transform.b,
41         transform.c,
42         transform.d,
43         transform.e,
44         transform.f,
45       );
46       context.strokeStyle = props.color ?? "#16a34a";
47       context.fillStyle = props.color ?? "#16a34a";
48       context.lineWidth = 1;
49       for (const collider of snapshot.colliders) {
50         const { min, max } = collider.bounds;
51         context.strokeRect(min[0], min[1], max[0] - min[0], max[1] - min[1]);
52       }
53       context.beginPath();
54       for (const body of snapshot.bodies) {
55         const [x, y] = body.centerOfMass;
56         context.moveTo(x - 3, y);
57         context.lineTo(x + 3, y);
58         context.moveTo(x, y - 3);
59         context.lineTo(x, y + 3);
60       }
61       for (const contact of snapshot.contacts)
62         for (const point of contact.points) {
63           const [x, y] = point.pointOnFirst;
64           context.moveTo(x, y);
65           context.lineTo(
66             x + 12 * contact.normal[0],
67             y + 12 * contact.normal[1],
68           );
69         }
70       context.stroke();
71     } finally {
72       context.restore();
73     }
74   },
75 );
76

## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.