Fixing canvas size in css elements, overflow, header and resize events

rodrigoadfaria · Aug 14, 2015 · c51b19b · c51b19b
1 parent df7161a
commit c51b19b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -183,7 +183,7 @@ <h4>DRAW</h4>
 	</div>
 
 	<div id="main">
-		<canvas id="gl-canvas" width="1600" height="768" tabindex="1">
+		<canvas id="gl-canvas" tabindex="1">
 		Oops ... your browser doesn't support the HTML5 canvas element
 		</canvas>
 

diff --git a/obj-viewer.js b/obj-viewer.js
@@ -89,7 +89,7 @@ function init() {
 
 	// create viewport and clear color
     gl.viewport( 0, 0, canvas.width, canvas.height );
-    gl.clearColor( 0.5, 0.5, 0.5, 1.0 );
+    //gl.clearColor( 0.5, 0.5, 0.5, 1.0 );
 
     // enable depth testing for hidden surface removal
     gl.enable(gl.DEPTH_TEST);
@@ -204,14 +204,14 @@ function prepareElements(initObj) {
 window.onresize = resizeCanvas;
 
 function resizeCanvas() {
-	var height = window.innerHeight;
-	
-	var ratio = canvas.width/canvas.height;
-	var width = height * ratio;
-	
-	canvas.style.width = width / 1.25   + 'px';
-	canvas.style.height = height / 1.25 + 'px';
-	aspect = canvas.width/canvas.height;
+    var width = canvas.clientWidth;
+    var height = $('#sidebar').height() - $('#header').height();
+    if (canvas.width != width || canvas.height != height) {
+        canvas.width = width;
+        canvas.height = height;
+    }
+    
+    aspect = canvas.width/canvas.height;
 }
 
 /**

diff --git a/style/style.css b/style/style.css
@@ -5,6 +5,7 @@ html, body{
   line-height: 1em;
   margin: 0px;
   background: #f9f9f9;
+  overflow: hidden;
 }
 
 img {
@@ -43,7 +44,7 @@ dt {
 
 #header {
   background-color: #009688;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.26);
+  box-shadow: 0 4px 5px rgba(0,0,0,0.25);
   margin: 0 auto;
   padding-left: 240px;
   overflow: hidden;
@@ -88,8 +89,7 @@ span.info a {
 }
 
 #main {
-  height:auto;
-  overflow:auto;
+  height: auto;
   padding-left: 200px;  
 }
 
@@ -249,6 +249,12 @@ span.info a {
               no-repeat;
 }
 
+#gl-canvas {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
 /* object list */
 #obj-list-container {
   margin-top: 15px;