title: Render Three-js Scene in HTML5 Canvas
body: <p>I can not figure out how to render a Three-js scene in a canvas on my index page.  I have the basic template for the canvas and the basic template for the three-js scene.  So how do I render the scene in my canvas?</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!--Jquery links--&gt;
      &lt;script src="node_modules/jquery/dist/jquery.min.js" rel="script"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap links --&gt;
      &lt;link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="node_modules/bootstrap/dist/js/bootstrap.min.js" rel="script"&gt;&lt;/script&gt;
      &lt;!--Three-js links--&gt;
      &lt;script src="node_modules/three-js/three.js" rel="script"&gt;&lt;/script&gt;
      &lt;!-- Custom css and javascript links --&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;script src="js/canvas.js" rel="script"&gt;&lt;/script&gt;
      &lt;script src="js/artifactScene.js" rel="script"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="start()"&gt;
      &lt;div class="container"&gt;
  
          &lt;div id="indexRowOne" class="row"&gt;
              &lt;!--#region sidebarColumn--&gt;
              &lt;div id="sidebarColumn" class="col-md-3 pull-left"&gt;
                  &lt;div class="sidebarContainer"&gt;
                      &lt;button&gt;&lt;img src="img/egyptMenuGlyph.png"&gt;&lt;h4&gt;Ancient Egypt&lt;/h4&gt;&lt;/button&gt;
                      &lt;button&gt;&lt;img src="img/greeceMenuGlyph.png"&gt;&lt;h4&gt;Ancient Greece&lt;/h4&gt;&lt;/button&gt;
                      &lt;button&gt;&lt;img src="img/romeMenuGlyph.png"&gt;&lt;h4&gt;Ancient Rome&lt;/h4&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--#endregion sidebarColumn--&gt;
  
              &lt;div id="canvasColumn" class="col-md-6"&gt;
                  &lt;div class="canvasContainer"&gt;
                      &lt;canvas id="artifactCanvas"&gt;
                      &lt;/canvas&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="artifactColumn" class="col-md-3 pull-right"&gt;
                  &lt;div class="artifactFrameDiv" &gt;
                      &lt;img src="artifacts/egypt/graniteHeadofAmenemnat/headOfAhkhmenet.png" class="artifactImage"&gt;
                      &lt;img src="artifacts/egypt/horus_falcon/horusFalcon.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                      &lt;img src="img/test.png"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  canvas.js</p>
  
  <pre><code>var gl; // A global variable for the WebGL context
  
  function start() {
      var canvas = document.getElementById("artifactCanvas");
      // Initialize the GL context
      gl = initWebGL(canvas);
      canvas.width = 673;
      canvas.height = 472;
      // Only continue if WebGL is available and working
      if (!gl) {
          return;
      }
      // Set clear color to black, fully opaque
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      // Enable depth testing
      gl.enable(gl.DEPTH_TEST);
      // Near things obscure far things
      gl.depthFunc(gl.LEQUAL);
      // Clear the color as well as the depth buffer.
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  }
  function initWebGL(canvas) {
      gl = null;
      // Try to grab the standard context. If it fails, fallback to experimental.
      gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      // If we don't have a GL context, give up now
      if (!gl) {
          alert("Unable to initialize WebGL. Your browser may not support it.");
      }
      return gl;
  }
  </code></pre>
  
  <p>artifactScene.js</p>
  
  <pre><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.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 = 5;
  
  var render = function () {
      requestAnimationFrame( render );
  
      cube.rotation.x += 0.1;
      cube.rotation.y += 0.1;
  
      renderer.render(scene, camera);
  };
  
  render();
  </code></pre>