<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>pixi/renderers/CanvasRenderer.js - Pixi.js API</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0pr2/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.8.0pr2/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="../logo_small.png" title="Pixi.js API"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 0.9</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/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</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 class="file-heading">File: pixi/renderers/CanvasRenderer.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* 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 :)
* @class CanvasRenderer
* @param width {Number} the width of the canvas view
* @param height {Number} the height of the canvas view
*/
PIXI.CanvasRenderer = function(width, height)
{
/**
* The width of the canvas view
* @property width
* @type Number
* @default 800
*/
this.width = width ? width : 800;
/**
* The height of the canvas view
* @property height
* @type Number
* @default 600
*/
this.height = height ? height : 600;
this.refresh = true;
/**
* The canvas element that the everything is drawn to
* @property view
* @type Canvas
*/
this.view = document.createElement( 'canvas' );
// hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)";
this.view.width = this.width;
this.view.height = this.height;
this.count = 0;
/**
* The canvas context that the everything is drawn to
* @property context
* @type Canvas 2d Context
*/
this.context = this.view.getContext("2d");
}
// constructor
PIXI.CanvasRenderer.constructor = PIXI.CanvasRenderer;
/**
* Renders the stage to its canvas view
* @method render
* @param stage {Stage} the Stage element to be rendered
*/
PIXI.CanvasRenderer.prototype.render = function(stage)
{
// update children if need be
stage.__childrenAdded = [];
stage.__childrenRemoved = [];
// update textures if need be
PIXI.texturesToUpdate = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
this.context.setTransform(1,0,0,1,0,0);
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage);
}
/**
* resizes the canvas view to the specified width and height
* @param the new width of the canvas view
* @param the new height of the canvas view
*/
PIXI.CanvasRenderer.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
this.view.width = width;
this.view.height = height;
}
/**
* @private
*/
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{
var transform = displayObject.worldTransform;
var context = this.context;
context.globalCompositeOperation = "source-over"
var blit = false;
if(!displayObject.visible)return;
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
if(frame)
{
context.globalAlpha = displayObject.worldAlpha;
// BLITZ!!!
/*
* if the rotation is 0 then we can blitz it
* meaning we dont need to do a transform and also we
* can round to the nearest round number for a little extra speed!
*/
/*if(displayObject.rotation == 0)
{
if(!blit)this.context.setTransform(1,0,0,1,0,0);
blit = true;
context.drawImage(displayObject.texture.baseTexture.image,
frame.x,
frame.y,
frame.width,
frame.height,
(transform[2]+ ((displayObject.anchor.x - displayObject.texture.trim.x) * -frame.width) * transform[0]),
(transform[5]+ ((displayObject.anchor.y - displayObject.texture.trim.y) * -frame.height)* transform[4]),
(displayObject.width * transform[0]),
(displayObject.height * transform[4]));
}
else
{*/
blit = false;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
context.drawImage(displayObject.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
(displayObject.anchor.x - displayObject.texture.trim.x) * -frame.width,
(displayObject.anchor.y - displayObject.texture.trim.y) * -frame.height,
displayObject.width,
displayObject.height);
//}
}
}
else if(displayObject instanceof PIXI.Strip)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
this.renderStrip(displayObject);
}
// render!
for (var i=0; i < displayObject.children.length; i++)
{
this.renderDisplayObject(displayObject.children[i]);
}
}
/**
* @private
*/
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
{
var context = this.context;
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
context.beginPath();
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
};
// context.globalCompositeOperation = 'lighter';
context.fillStyle = "#FF0000";
context.fill();
context.closePath();
//context.globalCompositeOperation = 'source-over';
}
/**
* @private
*/
PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
{
var context = this.context;
//context.globalCompositeOperation = 'lighter';
// draw triangles!!
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2]* strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3]* strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
context.save();
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
// context.fillStyle = "white"//rgb(1, 1, 1,1));
// context.fill();
context.clip();
// Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
};
// context.globalCompositeOperation = 'source-over';
}
</pre>
</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>
