Made canvas automatically resize to width of window on page load.

jwintersinger · Mar 6, 2009 · eef1b86 · eef1b86
1 parent 7bae803
commit eef1b86
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/TODO b/TODO
@@ -10,3 +10,12 @@ Track high scores of user through cookies -- maybe store JSON in cookie
 Implement animation of disk onto tower
 Add AI solver
 Inform user of number of moves he took, minimum number of moves, percentage delta
+Make canvas resize if window resized
+  Problem: must force redraw, since canvas goes blank when resized
+    Which means that Canvas would need reference to TowerManager
+  Canvas.prototype.make_canvas_resize_if_window_resized = function() {
+    var self = this;
+    window.addEventListener('resize', function() {
+        self.resize_to_client_width();
+    }, false);
+  }
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
   </head>
 
   <body>
-    <canvas id="canvas" width="600" height="140"></canvas>
+    <canvas id="canvas" width="600" height="300"></canvas>
     <div id="victory-notification">
       <div id="victory-message">
         <h1>Victory!</h1>

diff --git a/javascripts/canvas.js b/javascripts/canvas.js
@@ -1,13 +1,19 @@
 function Canvas(canvas_id) {
   this.canvas_id = canvas_id;
   this.recreate();
+  this.resize_to_client_width();
 }
 
 Canvas.prototype.load_canvas = function() {
   this.canvas = document.getElementById(this.canvas_id);
   this.ctx = this.canvas.getContext('2d');
 }
 
+Canvas.prototype.resize_to_client_width = function() {
+  this.canvas.width = window.innerWidth;
+}
+
+
 Canvas.prototype.clear = function() {
   this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 }