# Contents appear off center on my canvas

**URL:** <https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351>\
**Category:** Questions\
**Tags:** resizing\
**Created:** [April 5, 2018, 5:46pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351 "2018-04-05T17:46:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dennis](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Dennis](https://discourse.threejs.org/u/Dennis)\
**Post date:** [April 5, 2018, 5:46pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/1 "2018-04-05T17:46:14Z")

</div>

Hi, I’m having trouble with my contents appearing almost off screne in my canvas. I’m very new to three.js and would appreciate any feedback on what I might be doing wrong. I apologize if my code is sloppy. I’ve been trying all kinds of things to get my content to center. Code and screen shots follow. Thanks in advance for any insights you can share.

Here’s my HTML including the three.js script

```auto
    <canvas id="canvas">
       
                        <script>
                        function onResize(element, callback) {
                            var height = element.clientHeight;
                            var width = element.clientWidth;
                            
                                        
                            return setInterval(function() {
                            if (element.clientHeight != height || element.clientWidth != width) {
                                height = element.clientHeight;
                                width = element.clientWidth;
                                callback();
                                }
                            }, 500);
                        }
                        </script>
                        <script> //main canvas script
                            var canvas = document.getElementById('canvas');    
                                  
                            var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
                            renderer.setPixelRatio( canvas.devicePixelRatio );
                            canvas.width = canvas.clientWidth;
                            canvas.height = canvas.clientHeight;
                            renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);   

                                // Set Scene Camera and Renderer

                                var scene = new THREE.Scene();
                                scene.background = new THREE.Color( 0xcce0ff );
                                var camera = new THREE.PerspectiveCamera( 60, canvas.width/canvas.height, 0.1, 2000 );
                                camera.position.set(5 * -1.25, 5, 5 * 1.25);
                                var controls = new THREE.OrbitControls( camera, canvas );

                            //blue box geometry from resize sample
                            var geometry = new THREE.BoxGeometry( 5, 5, 5 );
                            var material = new THREE.MeshPhongMaterial({ color: 0x1C4A8C });
                            var cube = new THREE.Mesh(geometry, material);
                            scene.add(cube);

                            // lights mine
                            var light, materials;
                            scene.add( new THREE.AmbientLight( 0x666666 ) );
                            light = new THREE.DirectionalLight( 0xdfebff, 1 );
                            light.position.set( 50, 200, 100 );
                            light.position.multiplyScalar( 1.3 );
                            light.castShadow = true;
                            light.shadow.mapSize.width = 1024;
                            light.shadow.mapSize.height = 1024;
                            var d = 300;
                            light.shadow.camera.left = - d;
                            light.shadow.camera.right = d;
                            light.shadow.camera.top = d;
                            light.shadow.camera.bottom = - d;
                            light.shadow.camera.far = 1000;
                            scene.add( light );

                            //Resize div window function
                            onResize(canvas, function () {
                                canvas.width = canvas.clientWidth;
                                canvas.height = canvas.clientHeight;
                                renderer.setViewport(0, 0, canvas.width, canvas.height);
                                camera.aspect = canvas.width / canvas.height;
                                camera.updateProjectionMatrix();
                            });
                            // Render Loop
                            var render = function () {
                            requestAnimationFrame( render );
                            renderer.render(scene, camera);
                            };
                            render();
                            //end canvas script
                        </script>        

                    </canvas><!--canvas-->

```

My CSS for the canvas which is inside the model div also show below:

```css
#canvas {
  padding: 0px;
  background-color: #000;
  margin: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #cccccc;
  overflow-y: auto;
  overflow-x: auto;
}
#model {

  background-color: #fff;
  height: calc(100% - 127px);
  padding: 15px;
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
  overflow: hidden;
}

```

Here is a screen shot showing only the top of the box geometry in the bottom of the canvas window.

![matcalcshot](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/c/ce704db3d86f49f00c4eeb608b2a39164bb516ff.png)

As I resize the window to a smaller height the box comes into view completely as shown here:  
 ![calcshortershot](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/6/66b4d7dcd31c45d398e631e4816e8979e496c8a6.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 5, 2018, 8:07pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/2 "2018-04-05T20:07:26Z")

</div>

Is there a link to the web page in the Internet?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 5, 2018, 8:22pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/3 "2018-04-05T20:22:49Z")

</div>

I’m not sure the way you resize your canvas is correct. As @prisoner849 said, please provide a live demo. Use this [fiddle](https://jsfiddle.net/f2Lommf5/) as a start template.

> [@Dennis](#):
>
> renderer.setPixelRatio( canvas.devicePixelRatio );

It should be `renderer.setPixelRatio( window.devicePixelRatio );`. `devicePixelRatio` is a property of `window`.

---

<div class="post-metadata">

**Author:** ![Dennis](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Dennis](https://discourse.threejs.org/u/Dennis)\
**Post date:** [April 5, 2018, 10:02pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/4 "2018-04-05T22:02:39Z")

</div>

Thanks for the reply prisoner849 and Mugen87!  
I only have this on my local machine at the moment. Having trouble uploading to fiddle and getting anything other than basic page layout and black canvas back ground to show. Still Trying.

also commenting out the  
`//renderer.setPixelRatio( canvas.devicePixelRatio );`

has no effect on the issue.

Changing it to window. device… Changing to 'window.devicePixelRatio… only makes the canvas look like this:  
 ![pic3](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/de6631e403604447278259c6d0c522dd5d69cdac.png)

Page code, layout etc… seems to work fine when resizing etc… just can get the canvas content height to center. Makes me think its something I have wrong in the Three.js code.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 5, 2018, 10:30pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/5 "2018-04-05T22:30:16Z")

</div>

Can you explain the logics of how you do the resize of the canvas? Did I get it correctly, that you call the function for resize every a half of a second?  
Have a look at this answer on Stackoverflow (the fourth example in the answer):

> <https://stackoverflow.com/questions/29884485/threejs-canvas-size-based-on-container/45046955#45046955>

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 6, 2018, 9:01am UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/6 "2018-04-06T09:01:17Z")

</div>

> [@Dennis](#):
>
> also commenting out the
> 
> [//renderer.setPixelRatio](https://renderer.setPixelRatio)( canvas.devicePixelRatio );
> 
> has no effect on the issue.

Yes, but `canvas.devicePixelRatio` is no valid argument. You apply `undefined` to `.setPixelRatio()`.

---

<div class="post-metadata">

**Author:** ![Dennis](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Dennis](https://discourse.threejs.org/u/Dennis)\
**Post date:** [April 6, 2018, 7:21pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/7 "2018-04-06T19:21:27Z")

</div>

> [@Mugen87](#):
>
> renderer.setPixelRatio( canvas.devicePixelRatio );

Mugen87, thanks for you patience with me on the .sePixelRatio. I understand now and have corrected the code.

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![Dennis](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Dennis](https://discourse.threejs.org/u/Dennis)\
**Post date:** [April 6, 2018, 7:30pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/8 "2018-04-06T19:30:28Z")

</div>

prisoner849,

Thanks so much for your help. My logic was in questions hence my initial question. After viewing sample code 4 from the link you provided I understood I was writing too much code.

I scratched most of my code and followed your example as the basic template and now all is working as shown below:  
 ![fixed](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/db1f98e24e9694a50036d37bb6da19b30e97f973.jpg)

Thanks so much for your time and help. You guys are great!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 6, 2018, 7:32pm UTC](https://discourse.threejs.org/t/contents-appear-off-center-on-my-canvas/2351/9 "2018-04-06T19:32:05Z")

</div>

You’re welcome 🍻 😉