CanvasRenderer: Parity with WebGLRenderer's setViewport (scaling).

src/renderers/CanvasRenderer.js

@@ -20,13 +20,13 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 	_canvasWidth = _canvas.width,
 	_canvasHeight = _canvas.height,
+	_canvasWidthHalf = Math.floor( _viewportWidth / 2 ),
+	_canvasHeightHalf = Math.floor( _viewportHeight / 2 ),
 
 	_viewportX = 0,
 	_viewportY = 0,
 	_viewportWidth = _canvasWidth,
 	_viewportHeight = _canvasHeight,
-	_viewportWidthHalf = Math.floor( _viewportWidth / 2 ),
-	_viewportHeightHalf = Math.floor( _viewportHeight / 2 ),
 	
 	_context = _canvas.getContext( '2d', {
 		alpha: parameters.alpha === true
@@ -162,6 +162,9 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_canvas.width = _canvasWidth;
 		_canvas.height = _canvasHeight;
 
+		_canvasWidthHalf = Math.floor( _canvasWidth / 2 );
+		_canvasHeightHalf = Math.floor( _canvasHeight / 2 );
+
 		if ( this.devicePixelRatio !== 1 && updateStyle !== false ) {
 
 			_canvas.style.width = width + 'px';
@@ -169,6 +172,12 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 		}
 
+		_clipBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf ),
+		_clipBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
+
+		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
+		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
+
 		_contextGlobalAlpha = 1;
 		_contextGlobalCompositeOperation = 0;
 		_contextStrokeStyle = null;
@@ -188,16 +197,10 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_viewportWidth = width;
 		_viewportHeight = height;
 
-		_viewportWidthHalf = Math.floor( _viewportWidth / 2 ),
-		_viewportHeightHalf = Math.floor( _viewportHeight / 2 ),
-
-		_clipBox.min.set( - _viewportWidthHalf, - _viewportHeightHalf ),
-		_clipBox.max.set(   _viewportWidthHalf,   _viewportHeightHalf );
-
-		_clearBox.min.set( - _viewportWidthHalf, - _viewportHeightHalf );
-		_clearBox.max.set(   _viewportWidthHalf,   _viewportHeightHalf );
-
-		_context.setTransform( 1, 0, 0, - 1, _viewportX + _viewportWidthHalf, _canvasHeight - ( _viewportY + _viewportHeight ) + _viewportHeightHalf );
+		_context.setTransform( 1, 0, 0, 1, 0, 0 );
+		_context.translate( _viewportX, _canvasHeight - _viewportY );
+		_context.scale( _viewportWidth / _canvasWidth, - _viewportHeight / _canvasHeight );
+		_context.translate( _canvasWidthHalf, _canvasHeightHalf );
 
 	};
 
@@ -209,8 +212,8 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_clearColor.set( color );
 		_clearAlpha = alpha !== undefined ? alpha : 1;
 
-		_clearBox.min.set( - _viewportWidthHalf, - _viewportHeightHalf );
-		_clearBox.max.set(   _viewportWidthHalf,   _viewportHeightHalf );
+		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
+		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 
 	};
 
@@ -314,7 +317,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 			if ( element instanceof THREE.RenderableSprite ) {
 
 				_v1 = element;
-				_v1.x *= _viewportWidthHalf; _v1.y *= _viewportHeightHalf;
+				_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
 
 				renderSprite( _v1, element, material );
 
@@ -322,8 +325,8 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 				_v1 = element.v1; _v2 = element.v2;
 
-				_v1.positionScreen.x *= _viewportWidthHalf; _v1.positionScreen.y *= _viewportHeightHalf;
-				_v2.positionScreen.x *= _viewportWidthHalf; _v2.positionScreen.y *= _viewportHeightHalf;
+				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
+				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 
 				_elemBox.setFromPoints( [
 					_v1.positionScreen,
@@ -344,9 +347,9 @@ THREE.CanvasRenderer = function ( parameters ) {
 				if ( _v2.positionScreen.z < -1 || _v2.positionScreen.z > 1 ) continue;
 				if ( _v3.positionScreen.z < -1 || _v3.positionScreen.z > 1 ) continue;
 
-				_v1.positionScreen.x *= _viewportWidthHalf; _v1.positionScreen.y *= _viewportHeightHalf;
-				_v2.positionScreen.x *= _viewportWidthHalf; _v2.positionScreen.y *= _viewportHeightHalf;
-				_v3.positionScreen.x *= _viewportWidthHalf; _v3.positionScreen.y *= _viewportHeightHalf;
+				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
+				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
+				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
 
 				if ( material.overdraw > 0 ) {
 
@@ -472,8 +475,8 @@ THREE.CanvasRenderer = function ( parameters ) {
 		setOpacity( material.opacity );
 		setBlending( material.blending );
 
-		var scaleX = element.scale.x * _viewportWidthHalf;
-		var scaleY = element.scale.y * _viewportHeightHalf;
+		var scaleX = element.scale.x * _canvasWidthHalf;
+		var scaleY = element.scale.y * _canvasHeightHalf;
 
 		var dist = 0.5 * Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
 		_elemBox.min.set( v1.x - dist, v1.y - dist );