function format( num ){
            return (num >= 0 ? ' ' : '') + num.toPrecision(2);
        }
class DebugRenderer < Renderer

Physics.renderer('debug')

Extends canvas renderer with special debugging functionality.

Additional config options:

- metaEl: HTMLElement to write meta information like FPS and IPF into. (default: autogenerated)
- offset: Offset the shapes by this amount. (default: `{ x: 0, y: 0 }`)
- styles: Styles to use to draw the shapes. (see below)
- drawAABB: whether or not to draw bounding boxes. (default: `true`)
- drawRealPosition: whether or not to draw the non-interpolated position of bodies. (default: `false`)
- drawIntervals: whether or not to draw the broadphase (sweep-prune) intervals. (default: `false`)
- drawContacts: whether or not to draw contact points. (default: `false`)
- drawSleepState: whether or not to highlight sleeping bodies. (default: `false`)
- drawBodyState: whether or not to show body position and velocity. (default: `false`)
- aabbColor: the color of AABBs
- realBodyStyle: styles used to draw the image of the body at its true non-interpolated position
- intervalMinColor: color of interval minima
- intervalMaxColor: color of interval maxima
- mtvColor: color of minimum transit vector for contacts (overlaps)
- contactColor: color of contact points

The styles property should contain _default_ styles for each shape you want to draw.

Example:

```javascript
styles: {

   'circle' : {
       strokeStyle: '#542437',
       lineWidth: 1,
       fillStyle: '#542437',
       angleIndicator: 'white'
   },

   'convex-polygon' : {
       strokeStyle: '#542437',
       lineWidth: 1,
       fillStyle: '#542437',
       angleIndicator: 'white'
   }
}
```