Change EffectComposer to use the renderer's canvas size

EffectComposer was using window.innerWidth and window.innerHeight which is not portable
if your app is not using the full window.

Unfortunately the devicePixelRatio crap messes things up as usual :(
I really wish you guys would remove any reference to devicePixelRatio from three.js
all it does is make it harder to follow best practices because you have to add magic
compensation outside for magic happening under the hood :(

In other words because three.js is deciding on a width and height on its own magic
instead of width and height specified by the user the user then has to guess
on how to compute a width and height that matches what three.js actually made

examples/js/postprocessing/EffectComposer.js

@@ -8,8 +8,10 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
 
 	if ( renderTarget === undefined ) {
 
-		var width = window.innerWidth || 1;
-		var height = window.innerHeight || 1;
+		var pixelRatio = renderer.getPixelRatio();
+
+		var width  = Math.floor( renderer.context.canvas.width  / pixelRatio ) || 1;
+		var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1;
 		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
 
 		renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
@@ -108,8 +110,10 @@ THREE.EffectComposer.prototype = {
 
 			renderTarget = this.renderTarget1.clone();
 
-			renderTarget.width = window.innerWidth;
-			renderTarget.height = window.innerHeight;
+			var pixelRatio = renderer.getPixelRatio();
+
+			renderTarget.width  = Math.floor( this.renderer.context.canvas.width  / pixelRatio );
+			renderTarget.height = Math.floor( this.renderer.context.canvas.height / pixelRatio );
 
 		}