title: Three.js: Why does the size of CanvasRenderer affect performance on iPhone5s' browsers(chrome, safari)
body: <p>I am trying to use Three.js to make some graphics. At the beginning stage, I found out: till now on ios7.0, I cannot use WebGL. So instead, I use CanvasRenderer. However, it seems that the size of CanvasRenderer will seriously affect the performance. Could someone give share some thoughts? Or provide a good resolution for CanvasRenderer on ios devices?</p>
  
  <p>Note: I displayed the resolution of chrome on the iPhone5s: 980x1544. </p>
  
  <p>If I set resolution to 640*1024, it works fine. </p>
  
  <p>If I use smaller resolution: (window.innerWidth/2 , window.innerHeight/2), that works fine as well.</p>
  
  <p>However, if I use full width and full height, the cube will not display. Even if I set height to (640,1025), the spinning cube will be really slow.</p>
  
  <p>My question is : <strong>how does the size of CanvasRenderer impact on the performance?</strong> (Specifically for iPhone5 browsers in this case)</p>
  
  <p>The following is the simple code I wrote to render a cube:</p>
  
  <pre><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 1000);
  document.getElementById("debug").innerHTML = window.innerWidth + " " + window.innerHeight; 
  
  renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
  renderer.setSize(640, 1024);
  document.getElementById("body").appendChild(renderer.domElement);
  
  var geometry = new THREE.BoxGeometry(1,1,1);
  var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  
  camera.position.z = 10;
  
  
  var render = function () {
      requestAnimationFrame(render);
  
      cube.rotation.x += 0.1;
      cube.rotation.y += 0.1;
  
      renderer.render(scene, camera);
  };
  
  render();
  </code></pre>
  
  <p>For reference, you could try to use your iPhone to load these two pages. You can easily see the performance difference.</p>
  
  <p>Resolution 640*1024:  <a href="http://shawnfandev.com/Testing/workingResolution/Cube.php" rel="nofollow">http://shawnfandev.com/Testing/workingResolution/Cube.php</a></p>
  
  <p>Resolution 640*1200:  <a href="http://shawnfandev.com/Testing/higherResolution/Cube.php" rel="nofollow">http://shawnfandev.com/Testing/higherResolution/Cube.php</a></p>
  
  <p>Any thoughts is appreciated!</p>