[name]
The Canvas renderer displays your beautifully crafted scenes
not using WebGL,
but draws it using the (slower)
Canvas 2D Context
API.
NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].
This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
function webglAvailable() {
try {
var canvas = document.createElement( 'canvas' );
return !!( window.WebGLRenderingContext && (
canvas.getContext( 'webgl' ) ||
canvas.getContext( 'experimental-webgl' ) )
);
} catch ( e ) {
return false;
}
}
if ( webglAvailable() ) {
renderer = new THREE.WebGLRenderer();
} else {
renderer = new THREE.CanvasRenderer();
}
Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 <canvas> tag.
The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.
Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
Constructor
[name]([param:object parameters])
parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.
[page:DOMElement canvas] - A [link:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas canvas]
where the renderer draws its output.
This corresponds to the [page:CanvasRenderer.domElement domElement] property below.
If not passed in here, a new canvas element will be created.
[page:Boolean alpha] - whether the canvas contains an alpha (transparency) buffer or not.
Default is *false*.
Properties
[property:Object info]
An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:
[property:DOMElement domElement]
A [page:Canvas] where the renderer draws its output.
This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
[property:Boolean autoClear]
Defines whether the renderer should automatically clear its output before rendering.
[property:Boolean sortObjects]
Defines whether the renderer should sort objects. Default is true.
Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
[property:boolean sortElements]
Defines whether the renderer should sort the face of each object. Default is true.
Methods
[method:null render]([param:Scene scene], [param:Camera camera])
scene -- The scene to render.
camera -- the camera to view the scene.
Render a scene using a camera.
[method:null clear]()
Tells the renderer to clear its color drawing buffer with the clearcolor.
[method:null setClearColor]([param:Color color], [param:number alpha])
color -- The color to clear the canvas with.
alpha -- The alpha channel to clear the canvas with.
This set the clearColor and the clearAlpha.
[method:null setSize]([param:Number width], [param:Number height])
width -- The width of the drawing canvas.
height -- The height of the drawing canvas.
This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
[method:null setClearColorHex]([param:number hex], [param:number alpha])
hex -- The the hexadecimal value of the color to clear the canvas with.
alpha -- The alpha channel to clear the canvas with.
This set the clearColor and the clearAlpha.
[method:number getClearColorHex]()
Returns the [page:number hex] color.
[method:number getClearAlpha]()
Returns the alpha value.
Empty Methods to Maintain Compatibility with [page:WebglRenderer]
[method:null clearColor]()
[method:null clearDepth]()
[method:null clearStencil]()
[method:number getMaxAnisotropy]() - returns 1
Source
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js]