I'm struggling to get the canvas to be above the footer while using a three.js script. I pass my canvas in to webglrenderer, but then it pops the canvas to the bottom and puts the footer above it.

Any ideas how to get the canvas inside the content and not under the footer?


    <h1>My Title</h1>

    <canvas id="myCanvas" style="width:400px; height:400px;"></canvas>

        var canvas1 = document.getElementById("myCanvas");

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer({ canvas: canvas1 });
        renderer.setSize( window.innerWidth, window.innerHeight);
        document.body.appendChild( renderer.domElement );

        //create the shape
        var geometry = new THREE.BoxGeometry( 1, 1, 1);

        //create a material, color, or image
        var material = new THREE.MeshBasicMaterial( {color:0xFFFFFF,wireframe:true});
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 3;

        //game logic
        var update = function()
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.005;


        //draw scene
        var render = function()
            renderer.render(scene, camera);

        //run game loop
        var GameLoop = function(){
            requestAnimationFrame( GameLoop );




  • See if you can recreate the problem here so we can better assist you. If you're unable to, at least provide the stylesheet along with footer.php content so we get a better understanding of the issue. – Sheedo Dec 23 '18 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.