[name]

The Canvas renderer displays your beautifully crafted scenes not using WebGL, but draws it using the (slower) Canvas 2D Context API.

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. Because the Canvas renderer is not part of the three.js core, you have to include it from /examples/js/renderers/.

Constructor

[name]([page: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.

canvas — A [page:Canvas] where the renderer draws its output.

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:

render:
- vertices
- faces

[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]([page:Scene scene], [page: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]([page:Color color], [page: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]([page:Number width], [page: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]([page:number hex], [page: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:null setFaceCulling]()
[method:null supportsVertexTextures]()
[method:number getMaxAnisotropy]() - returns 1

Source

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]