Three.js example not displaying on canvas

Question

i found an example of three.js and I am trying to implement it on a <canvas></canvas> element. I get a reference to the element but I dont get a visual. I have my canvas element with the Id of "mycanvas".

<canvas id="mycanvas" style="border: 5px solid white" width="600" height="500"></canvas>

an I use an onload function in the body called WebGLStart() which calls the script below.

   <script>
        function WebGLStart()
        {
            //Get the canvas and the context
            var canvas = document.getElementById('mycanvas');
            var canvas_context = canvas.getContext("webgl");
            console.log("Canvas: "+canvas.width);
            console.log("Canvas: "+canvas.height);

            var RENDER_DIST = 1000,
                FOV = 75;

            var WIDTH = canvas.width,
                HEIGHT= canvas.height;

            var scene = new THREE.Scene();


            var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, 0.1, RENDER_DIST);

            camera.position.z = 100;

            scene.add(camera);

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(WIDTH,HEIGHT); 
            console.log("R info: "+renderer.info);

            canvas.appendChild(renderer.domElement);

            init();
            loopRun();

            function init() 
            {
                var geometry = new THREE.SphereGeometry(50); 
                var material = new THREE.MeshBasicMaterial({color: 0xff0000}); 
                var sphere = new THREE.Mesh(geometry, material); 
                scene.add(sphere);
            }

            function loopRun() 
            {
                requestAnimationFrame(loopRun);
                renderer.render(scene, camera);
            }
        }
    </script>

Is there any reason why this would not display? I get outputs on chromes prompt(canvas width and height) but no display. any ideas would be appreciated

Answer 1

Child elements of the canvas element are not visible.

To solve this attach the renderer DOM element to some other DOM element, eg document body.

if you change this line:

canvas.appendChild(renderer.domElement);

to this:

document.body.appendChild(renderer.domElement);

You'll get the desired result.

Answer 2

Tade0 was right in the above answer! This is for people who like me had a <canvas></canvas> tags and now have to remove it.
The way I did it was first:
Implement a style tag and call your class something unique:

<style>

    canvas_for_three { 
          width: 600px; 
          height: 500px;
          border: 1px solid white;
          position: absolute;
          left: 0px;
          top: 0px;
          z-index: -1;
    }
  </style>

Next remove your <canvas></canvas> tags and replace them with:

<div id="ctx" class="canvas_for_three">
</div>

From here then on in your onload function use the
var canvas = document.getElementById('ctx');
So when your attaching the render to a DOM element it is now:

canvas.appendChild(renderer.domElement); 

Where canvas is your newly created canvas. This will replace the canvas tags.

Now you should have replaced your canvas tags with divs and the image viewport should be in the same position as where you had your <canvas></canvas> tags