<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CanvasRenderer - pixi.js</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 1.6.0</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="../classes/AjaxRequest.html">AjaxRequest</a></li>
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
<li><a href="../classes/autoDetectRenderer.html">autoDetectRenderer</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/CanvasMaskManager.html">CanvasMaskManager</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/CanvasTinter.html">CanvasTinter</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
<li><a href="../classes/ComplexPrimitiveShader.html">ComplexPrimitiveShader</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="../classes/FilterTexture.html">FilterTexture</a></li>
<li><a href="../classes/getRecommendedRenderer.html">getRecommendedRenderer</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/InteractionData.html">InteractionData</a></li>
<li><a href="../classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/Matrix.html">Matrix</a></li>
<li><a href="../classes/Matrix2.html">Matrix2</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/NormalMapFilter.html">NormalMapFilter</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="../classes/PixiFastShader.html">PixiFastShader</a></li>
<li><a href="../classes/PixiShader.html">PixiShader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/PolyK.html">PolyK</a></li>
<li><a href="../classes/PrimitiveShader.html">PrimitiveShader</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/Rope.html">Rope</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteBatch.html">SpriteBatch</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Strip.html">Strip</a></li>
<li><a href="../classes/Text.html">Text</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
<li><a href="../classes/WebGLFilterManager.html">WebGLFilterManager</a></li>
<li><a href="../classes/WebGLGraphics.html">WebGLGraphics</a></li>
<li><a href="../classes/WebGLMaskManager.html">WebGLMaskManager</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
<li><a href="../classes/WebGLShaderManager.html">WebGLShaderManager</a></li>
<li><a href="../classes/WebGLSpriteBatch.html">WebGLSpriteBatch</a></li>
<li><a href="../classes/WebGLStencilManager.html">WebGLStencilManager</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>CanvasRenderer Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l5"><code>src/pixi/renderers/canvas/CanvasRenderer.js:5</code></a>
</div>
Module: <a href="../modules/PIXI.html">PIXI</a>
</div>
<div class="box intro">
<p>the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
Dont forget to add the view to your DOM or you will not see anything :)</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_CanvasRenderer" class="method item">
<h3 class="name"><code>CanvasRenderer</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>width=800</code>
</li>
<li class="arg">
<code>height=600</code>
</li>
<li class="arg">
<code class="optional">[view]</code>
</li>
<li class="arg">
<code class="optional">[transparent=false]</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l5"><code>src/pixi/renderers/canvas/CanvasRenderer.js:5</code></a>
</p>
</div>
<div class="description">
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">width=800</code>
<span class="type">Number</span>
<div class="param-description">
<p>the width of the canvas view</p>
</div>
</li>
<li class="param">
<code class="param-name">height=600</code>
<span class="type">Number</span>
<div class="param-description">
<p>the height of the canvas view</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[view]</code>
<span class="type">HTMLCanvasElement</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>the canvas to use as a view, optional</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[transparent=false]</code>
<span class="type">Boolean</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>the transparency of the render view, default false</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
<li class="api-class-tab properties"><a href="#properties">Properties</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods">
<li class="index-item method private">
<a href="#method_CanvasBuffer">CanvasBuffer</a>
<span class="flag static">static</span>
</li>
<li class="index-item method private">
<a href="#method_clear">clear</a>
</li>
<li class="index-item method">
<a href="#method_render">render</a>
</li>
<li class="index-item method private">
<a href="#method_renderDisplayObject">renderDisplayObject</a>
</li>
<li class="index-item method private">
<a href="#method_renderStrip">renderStrip</a>
</li>
<li class="index-item method private">
<a href="#method_renderStripFlat">renderStripFlat</a>
</li>
<li class="index-item method">
<a href="#method_resize">resize</a>
</li>
<li class="index-item method private">
<a href="#method_resize">resize</a>
</li>
</ul>
</div>
<div class="index-section properties">
<h3>Properties</h3>
<ul class="index-list properties">
<li class="index-item property">
<a href="#property_CanvasMaskManager">CanvasMaskManager</a>
</li>
<li class="index-item property">
<a href="#property_clearBeforeRender">clearBeforeRender</a>
</li>
<li class="index-item property">
<a href="#property_context">context</a>
</li>
<li class="index-item property">
<a href="#property_height">height</a>
</li>
<li class="index-item property">
<a href="#property_renderSession">renderSession</a>
</li>
<li class="index-item property">
<a href="#property_transparent">transparent</a>
</li>
<li class="index-item property">
<a href="#property_view">view</a>
</li>
<li class="index-item property">
<a href="#property_width">width</a>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_CanvasBuffer" class="method item private">
<h3 class="name"><code>CanvasBuffer</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>width</code>
</li>
<li class="arg">
<code>height</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<span class="flag static">static</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l349"><code>src/pixi/renderers/canvas/CanvasRenderer.js:349</code></a>
</p>
</div>
<div class="description">
<p>Creates a Canvas element of the given size</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">width</code>
<span class="type">Number</span>
<div class="param-description">
<p>the width for the newly created canvas</p>
</div>
</li>
<li class="param">
<code class="param-name">height</code>
<span class="type">Number</span>
<div class="param-description">
<p>the height for the newly created canvas</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_clear" class="method item private">
<h3 class="name"><code>clear</code></h3>
<span class="paren">()</span>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l370"><code>src/pixi/renderers/canvas/CanvasRenderer.js:370</code></a>
</p>
</div>
<div class="description">
<p>Clears the canvas that was created by the CanvasBuffer class</p>
</div>
</div>
<div id="method_render" class="method item">
<h3 class="name"><code>render</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>stage</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l173"><code>src/pixi/renderers/canvas/CanvasRenderer.js:173</code></a>
</p>
</div>
<div class="description">
<p>Renders the stage to its canvas view</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">stage</code>
<span class="type"><a href="../classes/Stage.html" class="crosslink">Stage</a></span>
<div class="param-description">
<p>the Stage element to be rendered</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_renderDisplayObject" class="method item private">
<h3 class="name"><code>renderDisplayObject</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>displayObject</code>
</li>
<li class="arg">
<code>context</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l241"><code>src/pixi/renderers/canvas/CanvasRenderer.js:241</code></a>
</p>
</div>
<div class="description">
<p>Renders a display object</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">displayObject</code>
<span class="type"><a href="../classes/DisplayObject.html" class="crosslink">DisplayObject</a></span>
<div class="param-description">
<p>The displayObject to render</p>
</div>
</li>
<li class="param">
<code class="param-name">context</code>
<span class="type">Context2D</span>
<div class="param-description">
<p>the context 2d method of the canvas</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_renderStrip" class="method item private">
<h3 class="name"><code>renderStrip</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>strip</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l293"><code>src/pixi/renderers/canvas/CanvasRenderer.js:293</code></a>
</p>
</div>
<div class="description">
<p>Renders a strip</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">strip</code>
<span class="type"><a href="../classes/Strip.html" class="crosslink">Strip</a></span>
<div class="param-description">
<p>The Strip to render</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_renderStripFlat" class="method item private">
<h3 class="name"><code>renderStripFlat</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>strip</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l259"><code>src/pixi/renderers/canvas/CanvasRenderer.js:259</code></a>
</p>
</div>
<div class="description">
<p>Renders a flat strip</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">strip</code>
<span class="type"><a href="../classes/Strip.html" class="crosslink">Strip</a></span>
<div class="param-description">
<p>The Strip to render</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_resize" class="method item">
<h3 class="name"><code>resize</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>width</code>
</li>
<li class="arg">
<code>height</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l225"><code>src/pixi/renderers/canvas/CanvasRenderer.js:225</code></a>
</p>
</div>
<div class="description">
<p>Resizes the canvas view to the specified width and height</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">width</code>
<span class="type">Number</span>
<div class="param-description">
<p>the new width of the canvas view</p>
</div>
</li>
<li class="param">
<code class="param-name">height</code>
<span class="type">Number</span>
<div class="param-description">
<p>the new height of the canvas view</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_resize" class="method item private">
<h3 class="name"><code>resize</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>width</code>
</li>
<li class="arg">
<code>height</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l381"><code>src/pixi/renderers/canvas/CanvasRenderer.js:381</code></a>
</p>
</div>
<div class="description">
<p>Resizes the canvas that was created by the CanvasBuffer class to the specified width and height</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">width</code>
<span class="type">Number</span>
<div class="param-description">
<p>the new width of the canvas</p>
</div>
</li>
<li class="param">
<code class="param-name">height</code>
<span class="type">Number</span>
<div class="param-description">
<p>the new height of the canvas</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="properties" class="api-class-tabpanel">
<h2 class="off-left">Properties</h2>
<div id="property_CanvasMaskManager" class="property item">
<h3 class="name"><code>CanvasMaskManager</code></h3>
<span class="type"><a href="../classes/CanvasMaskManager.html" class="crosslink">CanvasMaskManager</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l134"><code>src/pixi/renderers/canvas/CanvasRenderer.js:134</code></a>
</p>
</div>
<div class="description">
<p>Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer</p>
</div>
</div>
<div id="property_clearBeforeRender" class="property item">
<h3 class="name"><code>clearBeforeRender</code></h3>
<span class="type">Boolean</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l26"><code>src/pixi/renderers/canvas/CanvasRenderer.js:26</code></a>
</p>
</div>
<div class="description">
<p>This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
If the Stage is transparent Pixi will use clearRect to clear the canvas every frame.
Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.</p>
</div>
</div>
<div id="property_context" class="property item">
<h3 class="name"><code>context</code></h3>
<span class="type">HTMLCanvasElement 2d Context</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l119"><code>src/pixi/renderers/canvas/CanvasRenderer.js:119</code></a>
</p>
</div>
<div class="description">
<p>The canvas 2d context that everything is drawn with</p>
</div>
</div>
<div id="property_height" class="property item">
<h3 class="name"><code>height</code></h3>
<span class="type">Number</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l102"><code>src/pixi/renderers/canvas/CanvasRenderer.js:102</code></a>
</p>
</div>
<div class="description">
<p>The height of the canvas view</p>
</div>
<p><strong>Default:</strong> 600</p>
</div>
<div id="property_renderSession" class="property item">
<h3 class="name"><code>renderSession</code></h3>
<span class="type">Object</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l141"><code>src/pixi/renderers/canvas/CanvasRenderer.js:141</code></a>
</p>
</div>
<div class="description">
<p>The render session is just a bunch of parameter used for rendering</p>
</div>
</div>
<div id="property_transparent" class="property item">
<h3 class="name"><code>transparent</code></h3>
<span class="type">Boolean</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l38"><code>src/pixi/renderers/canvas/CanvasRenderer.js:38</code></a>
</p>
</div>
<div class="description">
<p>Whether the render view is transparent</p>
</div>
</div>
<div id="property_view" class="property item">
<h3 class="name"><code>view</code></h3>
<span class="type">HTMLCanvasElement</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l111"><code>src/pixi/renderers/canvas/CanvasRenderer.js:111</code></a>
</p>
</div>
<div class="description">
<p>The canvas element that everything is drawn to</p>
</div>
</div>
<div id="property_width" class="property item">
<h3 class="name"><code>width</code></h3>
<span class="type">Number</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_canvas_CanvasRenderer.js.html#l93"><code>src/pixi/renderers/canvas/CanvasRenderer.js:93</code></a>
</p>
</div>
<div class="description">
<p>The width of the canvas view</p>
</div>
<p><strong>Default:</strong> 800</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
