PIXI

Class: CanvasRenderer

PIXI. CanvasRenderer

The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should
be used for browsers that do not support WebGL. Don't forget to add the CanvasRenderer.view to
your DOM or you will not see anything :)

new PIXI.CanvasRenderer(width, height, options)

core/renderers/canvas/CanvasRenderer.js, line 20
Name Type Default Description
width number 800 optional

the width of the canvas view
height number 600 optional

the height of the canvas view
options object optional

The optional renderer parameters

Name Type Default Description
view HTMLCanvasElement optional

the canvas to use as a view, optional
transparent boolean false optional

If the render view is transparent, default false
autoResize boolean false optional

If the render view is automatically resized, default false
antialias boolean false optional

sets antialias (only applicable in chrome at the moment)
resolution number 1 optional

The resolution / device pixel ratio of the renderer. The
resolution of the renderer retina would be 2.
clearBeforeRender boolean true optional

This sets if the CanvasRenderer will clear the canvas or
not before the new render pass.
backgroundColor number 0x000000 optional

The background color of the rendered area
(shown if not transparent).
roundPixels boolean false optional

If true Pixi will Math.floor() x/y values when rendering,
stopping pixel interpolation.

Extends

Members

backgroundColor

Sets the background color.

extractPIXI.CanvasExtract

Collection of methods for extracting data (image, pixels, etc.) from a display object or render texture

See:

Methods

destroy(removeView)

core/renderers/canvas/CanvasRenderer.js, line 236

Removes everything from the renderer and optionally removes the Canvas DOM element.

Name Type Default Description
removeView boolean false optional

Removes the Canvas element from the DOM.

inherited generateTexture(displayObject, scaleMode, resolution){PIXI.Texture}

core/renderers/SystemRenderer.js, line 226

Useful function that returns a texture of the display object that can then be used to create sprites
This can be quite useful if your displayObject is complicated and needs to be reused multiple times.

Name Type Description
displayObject PIXI.DisplayObject

The displayObject the object will be generated from
scaleMode number

Should be one of the scaleMode consts
resolution number

The resolution / device pixel ratio of the texture being generated
Returns:
Type Description
PIXI.Texture a texture of the graphics object

render(displayObject, renderTexture, clear, transform, skipUpdateTransform)

core/renderers/canvas/CanvasRenderer.js, line 114

Renders the object to this canvas view

Name Type Default Description
displayObject PIXI.DisplayObject

The object to be rendered
renderTexture PIXI.RenderTexture optional

A render texture to be rendered to.
If unset, it will render to the root context.
clear boolean false optional

Whether to clear the canvas before drawing
transform PIXI.Transform optional

A transformation to be applied
skipUpdateTransform boolean false optional

Whether to skip the update transform

resize(width, height)

core/renderers/canvas/CanvasRenderer.js, line 261

Resizes the canvas view to the specified width and height.

Name Type Description
width number

The new width of the canvas view
height number

The new height of the canvas view

setBlendMode(blendMode)

core/renderers/canvas/CanvasRenderer.js, line 220

Sets the blend mode of the renderer.

Name Type Description
blendMode number

See PIXI.BLEND_MODES for valid values.