docs/Phaser.Canvas.html

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Phaser Class: Canvas</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">Phaser</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li class="class-depth-0">
							<a href="Phaser.html">Phaser</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li class="class-depth-1">
							<a href="Phaser.Animation.html">Animation</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.AnimationManager.html">AnimationManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.AnimationParser.html">AnimationParser</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.ArrayList.html">ArrayList</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.BitmapData.html">BitmapData</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.BitmapText.html">BitmapText</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Button.html">Button</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Cache.html">Cache</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Camera.html">Camera</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Canvas.html">Canvas</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Circle.html">Circle</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Color.html">Color</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Device.html">Device</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Easing.html">Easing</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Back.html">Back</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Bounce.html">Bounce</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Circular.html">Circular</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Cubic.html">Cubic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Elastic.html">Elastic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Exponential.html">Exponential</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Linear.html">Linear</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Quartic.html">Quartic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Quintic.html">Quintic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Ellipse.html">Ellipse</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Events.html">Events</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Filter.html">Filter</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Frame.html">Frame</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.FrameData.html">FrameData</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Game.html">Game</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Gamepad.html">Gamepad</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.GamepadButton.html">GamepadButton</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Graphics.html">Graphics</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Group.html">Group</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Image.html">Image</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Input.html">Input</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.InputHandler.html">InputHandler</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Key.html">Key</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Keyboard.html">Keyboard</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Line.html">Line</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.LinkedList.html">LinkedList</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Loader.html">Loader</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.LoaderParser.html">LoaderParser</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Math.html">Math</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Mouse.html">Mouse</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.MSPointer.html">MSPointer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Net.html">Net</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Particle.html">Particle</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Particles.html">Particles</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Physics.html">Physics</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Physics.Arcade.html">Arcade</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Arcade.Body.html">Body</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Physics.Ninja.html">Ninja</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.Body.html">Body</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Physics.P2.html">P2</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.Body.html">Body</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.FixtureList.html">FixtureList</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.Material.html">Material</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.Spring.html">Spring</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Plugin.html">Plugin</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.PluginManager.html">PluginManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Point.html">Point</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Pointer.html">Pointer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Polygon.html">Polygon</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.QuadTree.html">QuadTree</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Rectangle.html">Rectangle</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RenderTexture.html">RenderTexture</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RetroFont.html">RetroFont</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.ScaleManager.html">ScaleManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Signal.html">Signal</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SignalBinding.html">SignalBinding</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SinglePad.html">SinglePad</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Sound.html">Sound</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SoundManager.html">SoundManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Sprite.html">Sprite</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Stage.html">Stage</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.State.html">State</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.StateManager.html">StateManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Text.html">Text</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tile.html">Tile</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tilemap.html">Tilemap</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TilemapParser.html">TilemapParser</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tileset.html">Tileset</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TileSprite.html">TileSprite</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Time.html">Time</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Timer.html">Timer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TimerEvent.html">TimerEvent</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Touch.html">Touch</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tween.html">Tween</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TweenManager.html">TweenManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Utils.html">Utils</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Utils.Debug.html">Debug</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.World.html">World</a>
						</li>
						

					</ul>
				</li>
				
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					

	<h1 class="page-title">Class: Canvas</h1>
<section>

<header>
    <h2>
        <span class="ancestors"><a href="Phaser.html">Phaser</a>.</span>
    
    Canvas
    </h2>
    
</header>

<article>
    <div class="container-overview">
    

<dt>
    <h4 class="name" id="Canvas"><span class="type-signature"></span>new Canvas<span class="signature">()</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>The Canvas class handles everything related to creating the <code>canvas</code> DOM tag that Phaser will use, including styles, offset and aspect ratio.</p>
    </div>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-3">line 3</a>
    </li></ul></dd>
    

</dl>

    
</dd>

    
    </div>

    
        <h3 class="subsection-title">Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="addToDOM"><span class="type-signature">&lt;static> </span>addToDOM<span class="signature">(canvas, parent, <span class="optional">overflowHidden</span>)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Adds the given canvas element to the DOM. The canvas will be added as a child of the given parent.
If no parent is given it will be added as a child of the document.body.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The canvas to set the touch action on.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>parent</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">HTMLElement</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The DOM element to add the canvas to.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>overflowHidden</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    true
                
                </td>
            

            <td class="description last"><p>If set to true it will add the overflow='hidden' style to the parent DOM element.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-166">line 166</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>Returns the source canvas.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="create"><span class="type-signature">&lt;static> </span>create<span class="signature">(<span class="optional">width</span>, <span class="optional">height</span>, <span class="optional">id</span>, <span class="optional">noCocoon</span>)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Creates a <code>canvas</code> DOM element. The element is not automatically added to the document.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    256
                
                </td>
            

            <td class="description last"><p>The width of the canvas element.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    256
                
                </td>
            

            <td class="description last"><p>The height of the canvas element..</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    ''
                
                </td>
            

            <td class="description last"><p>If given this will be set as the ID of the canvas element, otherwise no ID will be set.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>noCocoon</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>CocoonJS only allows 1 screencanvas object, which should be your game. If you need to create another canvas (i.e. for a texture) set this to 'true'.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-15">line 15</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The newly created canvas element.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getAspectRatio"><span class="type-signature">&lt;static> </span>getAspectRatio<span class="signature">(canvas)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Returns the aspect ratio of the given canvas.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
            <td class="description last"><p>The canvas to get the aspect ratio from.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-93">line 93</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The ratio between canvas' width and height.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getOffset"><span class="type-signature">&lt;static> </span>getOffset<span class="signature">(element, <span class="optional">point</span>)</span><span class="type-signature"> &rarr; {<a href="Phaser.Point.html">Phaser.Point</a>}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Get the DOM offset values of any given element</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The targeted element that we want to retrieve the offset.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>point</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Point.html">Phaser.Point</a></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The point we want to take the x/y values of the offset.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-55">line 55</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <ul>
<li>A point objet with the offsetX and Y as its properties.</li>
</ul>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type"><a href="Phaser.Point.html">Phaser.Point</a></span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setBackgroundColor"><span class="type-signature">&lt;static> </span>setBackgroundColor<span class="signature">(canvas, <span class="optional">color</span>)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the background color behind the canvas. This changes the canvas style property.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The canvas to set the background color on.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-104">line 104</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>Returns the source canvas.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setImageRenderingBicubic"><span class="type-signature">&lt;static> </span>setImageRenderingBicubic<span class="signature">(canvas)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the CSS image-rendering property on the given canvas to be 'bicubic' (aka 'auto').
Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
            <td class="description last"><p>The canvas to set image-rendering bicubic on.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-279">line 279</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>Returns the source canvas.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setImageRenderingCrisp"><span class="type-signature">&lt;static> </span>setImageRenderingCrisp<span class="signature">(canvas)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the CSS image-rendering property on the given canvas to be 'crisp' (aka 'optimize contrast on webkit').
Note that if this doesn't given the desired result then see the setSmoothingEnabled.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
            <td class="description last"><p>The canvas to set image-rendering crisp on.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-258">line 258</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>Returns the source canvas.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setSmoothingEnabled"><span class="type-signature">&lt;static> </span>setSmoothingEnabled<span class="signature">(context, value)</span><span class="type-signature"> &rarr; {CanvasRenderingContext2D}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the Image Smoothing property on the given context. Set to false to disable image smoothing.
By default browsers have image smoothing enabled, which isn't always what you visually want, especially
when using pixel art in a game. Note that this sets the property on the context itself, so that any image
drawn to the context will be affected. This sets the property across all current browsers but support is
patchy on earlier browsers, especially on mobile.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>context</code></td>
            

            <td class="type">
            
                
<span class="param-type">CanvasRenderingContext2D</span>


            </td>

            
            <td class="description last"><p>The context to enable or disable the image smoothing on.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
            <td class="description last"><p>If set to true it will enable image smoothing, false will disable it.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-234">line 234</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>Returns the source context.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">CanvasRenderingContext2D</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setTouchAction"><span class="type-signature">&lt;static> </span>setTouchAction<span class="signature">(canvas, <span class="optional">value</span>)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the touch-action property on the canvas style. Can be used to disable default browser touch actions.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The canvas to set the touch action on.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The touch action to set. Defaults to 'none'.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-122">line 122</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The source canvas.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setTransform"><span class="type-signature">&lt;static> </span>setTransform<span class="signature">(context, translateX, translateY, scaleX, scaleY, skewX, skewY)</span><span class="type-signature"> &rarr; {CanvasRenderingContext2D}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the transform of the given canvas to the matrix values provided.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>context</code></td>
            

            <td class="type">
            
                
<span class="param-type">CanvasRenderingContext2D</span>


            </td>

            
            <td class="description last"><p>The context to set the transform on.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>translateX</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The value to translate horizontally by.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>translateY</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The value to translate vertically by.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>scaleX</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The value to scale horizontally by.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>scaleY</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The value to scale vertically by.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>skewX</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The value to skew horizontaly by.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>skewY</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The value to skew vertically by.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-213">line 213</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>Returns the source context.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">CanvasRenderingContext2D</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="setUserSelect"><span class="type-signature">&lt;static> </span>setUserSelect<span class="signature">(canvas, <span class="optional">value</span>)</span><span class="type-signature"> &rarr; {HTMLCanvasElement}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the user-select property on the canvas style. Can be used to disable default browser selection actions.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLCanvasElement</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The canvas to set the touch action on.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The touch action to set. Defaults to 'none'.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Canvas.js.html">system/Canvas.js</a>, <a href="Canvas.js.html#sunlight-1-line-142">line 142</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The source canvas.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">HTMLCanvasElement</span>


	</dd>
</dl>


</dd>

        </dl>
    

</article>

</section>


				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		Phaser Copyright © 2012-2014 Photon Storm Ltd.
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
		on Tue May 20 2014 10:05:52 GMT+0100 (BST) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>


	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		$( function () {
			$( "#toc" ).toc( {
				anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1,h2,h3,h4",
				showAndHide : false,
				scrollTo    : 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
</body>
</html>