title: Three.js CanvasRenderer issues
body: <p>I'm just trying out Three.js. As I want to use CanvasRenderer as a fallback for devices where WebGL is not supported, I've noticed two issues:</p>
  
  <h2>Distored line / Bad geometry?</h2>
  
  <p><a href="https://i.stack.imgur.com/qsb4X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qsb4X.png" alt="image"></a></p>
  
  <h2>Additional pixel</h2>
  
  <p><a href="https://i.stack.imgur.com/QSbF7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QSbF7.png" alt="image"></a></p>
  
  <p>Here's my current code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var width = 960;
  var height = 500;
  var aspect = width / height;
  
  var D = 1;
  
  var CanvasRenderer = true;
  
  var scene    = new THREE.Scene();
  var camera   = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);
  
  if(CanvasRenderer) {
      var renderer = new THREE.CanvasRenderer({
          alpha: true,
          antialias: true
      });
  } else {
       var renderer = new THREE.WebGLRenderer({
   alpha: true,
        antialias: true
       });
  }
  
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  
  var geometry = new THREE.BoxGeometry(0.1, 1, 0.5);
  
  
  var cube = new THREE.Mesh(geometry, [
   new THREE.MeshPhongMaterial({
          color: 0x222222, // right
          overdraw: true
      }),
   new THREE.MeshPhongMaterial({
          color: 0xffffff,
          overdraw: true
      }),
      new THREE.MeshPhongMaterial({
          color: 0xEDE6F5, // Top
          overdraw: true
      }),
      new THREE.MeshPhongMaterial({
          color: 0xffffff,
          overdraw: true
      }),
      new THREE.MeshPhongMaterial({
          color: 0xFFFFFF, // Left
          overdraw: true
      }),
      new THREE.MeshPhongMaterial({
          color: 0xffffff,
          overdraw: true
      })
  ]);
  
  scene.add(cube);
  scene.add(new THREE.AmbientLight(0xFFFFFF));
  
  camera.position.set(20, 20, 20);
  camera.lookAt(scene.position);
  
  renderer.render(scene, camera);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
    overflow: hidden;
    background: #EEE;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>WebGL difference</h2>
  
  <p>You can see the difference with WebGL renderer:</p>
  
  <p><a href="https://i.stack.imgur.com/TEeKQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TEeKQ.png" alt="image"></a>
  <br><br></p>
  
  <h2>JSFiddle</h2>
  
  <p><a href="http://jsfiddle.net/4tbs4tpL/2/" rel="nofollow noreferrer">http://jsfiddle.net/4tbs4tpL/2/</a></p>