Matter.Render

Defined in: src/render/Render.js:1

The Matter.Render module is a simple HTML5 canvas based renderer for visualising instances of Matter.Engine. It is intended for development and debugging purposes, but may also be suitable for simple games. It includes a number of drawing options including wireframe, vector with support for sprites and viewports.

Methods

Matter.Render._createCanvas

(width, height)

→ private

Description

Parameters

Returns

canvas

@ src/render/Render.js:1317

Matter.Render._getPixelRatio

(canvas)

→ Numberprivate

Gets the pixel ratio of the canvas.

Parameters

Returns

Numberpixel ratio

@ src/render/Render.js:1334

Matter.Render._getTexture

(render, imagePath)

→ Imageprivate

Gets the requested texture (an Image) via its path

Parameters

Returns

Imagetexture

@ src/render/Render.js:1351

Matter.Render.applyBackground

(render, background)

private

Applies the background to the canvas using CSS.

Parameters

@ src/render/Render.js:1371

Matter.Render.bodies

(render, bodies, context)

private

Description

Parameters

@ src/render/Render.js:608

Matter.Render.bodyAxes

(render, bodies, context)

private

Draws body angle indicators and axes

Parameters

@ src/render/Render.js:880

Matter.Render.bodyBounds

(render, bodies, context)

private

Draws body bounds

Parameters

@ src/render/Render.js:843

Matter.Render.bodyConvexHulls

(render, bodies, context)

private

Optimised method for drawing body convex hull wireframes in one pass

Parameters

@ src/render/Render.js:764

Matter.Render.bodyIds

(render, bodies, context)

private

Draws body ids

Parameters

@ src/render/Render.js:1026

Matter.Render.bodyPositions

(render, bodies, context)

private

Draws body positions

Parameters

@ src/render/Render.js:942

Matter.Render.bodyShadows

(render, bodies, context)

private

Description

Parameters

@ src/render/Render.js:559

Matter.Render.bodyVelocity

(render, bodies, context)

private

Draws body velocity

Parameters

@ src/render/Render.js:998

Matter.Render.bodyWireframes

(render, bodies, context)

private

Optimised method for drawing body wireframes in one pass

Parameters

@ src/render/Render.js:711

Matter.Render.collisions

(render, pairs, context)

private

Description

Parameters

@ src/render/Render.js:1053

Matter.Render.constraints

(constraints, context)

private

Description

Parameters

@ src/render/Render.js:482

Matter.Render.create

([options])

→ Render

Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults. All properties have default values, and many are pre-calculated automatically based on other properties. See the properties section below for detailed information on what you can pass via the options object.

Parameters

Returns

RenderA new renderer

@ src/render/Render.js:35

Matter.Render.debug

(render, context)

private

Description

Parameters

@ src/render/Render.js:416

Matter.Render.endViewTransform

(render)

Resets all transforms on the render context.

Parameters

@ src/render/Render.js:274

Matter.Render.grid

(render, grid, context)

private

Description

Parameters

@ src/render/Render.js:1193

Matter.Render.inspector

(inspector, context)

private

Description

Parameters

  • inspector Inspector

@ src/render/Render.js:1232

Matter.Render.lookAt

(render, objects, [padding], [center=true])

Positions and sizes the viewport around the given object bounds. Objects must have at least one of the following properties:

  • object.bounds
  • object.position
  • object.min and object.max
  • object.x and object.y

Parameters

  • [center=true] Booloptional

@ src/render/Render.js:161

Matter.Render.mousePosition

(render, mouse, context)

private

Renders mouse position.

Parameters

@ src/render/Render.js:829

Matter.Render.run

(render)

Continuously updates the render canvas on the requestAnimationFrame event.

Parameters

@ src/render/Render.js:116

Matter.Render.separations

(render, pairs, context)

private

Description

Parameters

@ src/render/Render.js:1136

Matter.Render.setPixelRatio

(render, pixelRatio)

Sets the pixel ratio of the renderer and updates the canvas. To automatically detect the correct ratio, pass the string 'auto' for pixelRatio.

Parameters

@ src/render/Render.js:137

Matter.Render.startViewTransform

(render)

Applies viewport transforms based on render.bounds to a render context.

Parameters

@ src/render/Render.js:259

Matter.Render.stop

(render)

Ends execution of Render.run on the given render, by canceling the animation frame request event loop.

Parameters

@ src/render/Render.js:128

Matter.Render.vertexNumbers

(render, bodies, context)

private

Renders body vertex numbers.

Parameters

@ src/render/Render.js:803

Matter.Render.world

(render)

Renders the given engine's Matter.World object. This is the entry point for all rendering and should be called every time the scene changes.

Parameters

@ src/render/Render.js:283

Item Index

Methods

Properties

The following properties are specified for objects created by <span class="prefix">Matter.</span>.create and for objects passed to it via the options argument.

Events

Properties

The following properties are specified for objects created by Matter.Render.create and for objects passed to it via the options argument.

Render.bounds

Bounds

A Bounds object that specifies the drawing view region. Rendering will be automatically transformed and scaled to fit within the canvas size (render.options.width and render.options.height). This allows for creating views that can pan or zoom around the scene. You must also set render.options.hasBounds to true to enable bounded rendering.

@ src/render/Render.js:1482

Render.canvas

HTMLCanvasElement

The canvas element to render to. If not specified, one will be created if render.element has been specified.

Default: null

@ src/render/Render.js:1443

Render.context

CanvasRenderingContext2D

The 2d rendering context from the render.canvas element.

@ src/render/Render.js:1492

Render.controller

Render

A back-reference to the Matter.Render module.

@ src/render/Render.js:1421

Render.element

HTMLElement

A reference to the element where the canvas is to be inserted (if render.canvas has not been specified)

Default: null

@ src/render/Render.js:1435

Render.engine

Engine

A reference to the Matter.Engine instance to be used.

@ src/render/Render.js:1428

Render.options

The configuration options of the renderer.

@ src/render/Render.js:1451

Render.options.hasBounds

Boolean

A flag that specifies if render.bounds should be used when rendering.

Default: false

@ src/render/Render.js:1474

Render.options.height

Number

The target height in pixels of the render.canvas to be created.

Default: 600

@ src/render/Render.js:1466

Render.options.width

Number

The target width in pixels of the render.canvas to be created.

Default: 800

@ src/render/Render.js:1458

Render.textures

The sprite texture cache.

@ src/render/Render.js:1499

Events

The following events are emitted by objects created by <span class="prefix">Matter.</span>Render.create to objects that have subscribed using Matter.Events.on.

Events.on(Render, "afterRender", callback)

Fired after rendering

Event Payload:

An event object

The engine.timing.timestamp of the event

  • source

The source object of the event

  • name

The name of the event

@ src/render/Render.js:1405

Events.on(Render, "beforeRender", callback)

Fired before rendering

Event Payload:

An event object

The engine.timing.timestamp of the event

  • source

The source object of the event

  • name

The name of the event

@ src/render/Render.js:1395