Commits

Eric Rochester committed cff94eb

Fixed problems with canvas sizing.

  • Participants
  • Parent commits 4a46fbb

Comments (0)

Files changed (1)

File js/script.js

 }
 
 /*
+ * This displays an alert with some information about the viewport and the
+ * ball.
+ */
+Ball.prototype.info = function()
+{
+    alert(
+            'pos = ' + this.x + ', ' + this.y + ' : ' + this.r +
+            '\norientation = ' + window.orientation +
+            '\ninner* = ' + window.innerWidth + ', ' + window.innerHeight +
+            '\nviewport.* = ' + document.viewport.getWidth() + ', ' + document.viewport.getHeight() +
+            '\ndocument = ' + document.width + ', ' + document.height +
+            '\nscreen = ' + screen.width + ', ' + screen.height
+            );
+}
+
+/*
  * This renders the ball on the <canvas> element.
  */
 Ball.prototype.render = function(canvas)
 {
+    canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
-    canvas.width = window.innerWidth;
 
     var context = canvas.getContext('2d');
 
     context.stroke();
 
     var grad = context.createLinearGradient(
-            this.x, this.y,
-            this.x + this.r * 2, this.y + this.r * 2
+            this.x - this.r, this.y - this.r,
+            this.x + this.r, this.y + this.r
             );
     grad.addColorStop(0, 'white');
     grad.addColorStop(1, 'black');
 }
 
 /*
+ * This centers the ball in the window.
+ */
+Ball.prototype.center = function()
+{
+    var x = this.x;
+    var y = this.y;
+    this.x = window.innerWidth / 2;
+    this.y = window.innerHeight / 2;
+}
+
+/*
  * This initializes the playspace and returns the ball.
  */
 function init(view)
 {
-    var x = document.viewport.getWidth() / 2;
-    var y = document.viewport.getHeight() / 2;
+    var ball = new Ball(0, 0, 25);
+    ball.center();
+    ball.render(view);
 
-    if (window.orientation !== undefined) {
-        var tmp = x;
-        x = y;
-        y = tmp;
-    }
-
-    var ball = new Ball(x, y, 25);
-    ball.render(view);
+    // windows.addEventListener('deviceorientation', onWindowDeviceOrientation, false);
+    view.addEventListener('resize', onResize, false);
+    view.ontouchend = onTouchEnd;
 
     return ball;
 }
 
+function onTouchEnd(ev)
+{
+    ball.center();
+    ball.render(view);
+};
+
+function onResize(ev)
+{
+    resizeCanvas();
+    ball.center();
+    ball.render(view);
+}
+
+function onDeviceOrientation(ev)
+{
+    if (ev.alpha) {
+        ball = init(view);
+    }
+}
+
+function resizeCanvas()
+{
+    view.style.width = window.innerWidth + 'px';
+    view.style.height = window.innerHeight + 'px';
+}
+
 
 
 var view = $('view');
 var ball = init(view);
 
+