From a8485cac5387db2a7d25b1656b91d5cf67571eb4 Mon Sep 17 00:00:00 2001
From: Jeremy Herrman <jeremy@jherrman.com>
Date: Wed, 20 Mar 2013 13:27:39 -0400
Subject: [PATCH] Adding High DPI display support.

These changes make the webGL context render at the native resolution
for high DPI displays like on the retina MacBook Pro and Chromebook
Pixel.
---
 lesson01/index.html | 17 ++++++++++++++++-
 lesson02/index.html | 17 ++++++++++++++++-
 lesson03/index.html | 17 ++++++++++++++++-
 lesson04/index.html | 17 ++++++++++++++++-
 lesson05/index.html | 17 ++++++++++++++++-
 lesson06/index.html | 17 ++++++++++++++++-
 lesson07/index.html | 17 ++++++++++++++++-
 lesson08/index.html | 17 ++++++++++++++++-
 lesson09/index.html | 17 ++++++++++++++++-
 lesson10/index.html | 17 ++++++++++++++++-
 lesson11/index.html | 17 ++++++++++++++++-
 lesson12/index.html | 17 ++++++++++++++++-
 lesson13/index.html | 17 ++++++++++++++++-
 lesson14/index.html | 17 ++++++++++++++++-
 lesson15/index.html | 17 ++++++++++++++++-
 lesson16/index.html | 17 ++++++++++++++++-
 16 files changed, 256 insertions(+), 16 deletions(-)

diff --git a/lesson01/index.html b/lesson01/index.html
index 36f5560..ca2c7d5 100644
--- a/lesson01/index.html
+++ b/lesson01/index.html
@@ -31,7 +31,22 @@
     var gl;
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson02/index.html b/lesson02/index.html
index ff10ed7..0aac7d3 100644
--- a/lesson02/index.html
+++ b/lesson02/index.html
@@ -38,7 +38,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson03/index.html b/lesson03/index.html
index ee8dd63..f5a37ea 100644
--- a/lesson03/index.html
+++ b/lesson03/index.html
@@ -39,7 +39,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson04/index.html b/lesson04/index.html
index fb59f98..66c758b 100644
--- a/lesson04/index.html
+++ b/lesson04/index.html
@@ -39,7 +39,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson05/index.html b/lesson05/index.html
index 165e1f2..9783900 100644
--- a/lesson05/index.html
+++ b/lesson05/index.html
@@ -42,7 +42,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson06/index.html b/lesson06/index.html
index b6a2b28..deaadfa 100644
--- a/lesson06/index.html
+++ b/lesson06/index.html
@@ -42,7 +42,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson07/index.html b/lesson07/index.html
index c842528..201b9fc 100644
--- a/lesson07/index.html
+++ b/lesson07/index.html
@@ -61,7 +61,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson08/index.html b/lesson08/index.html
index b78135e..a8543e4 100644
--- a/lesson08/index.html
+++ b/lesson08/index.html
@@ -63,7 +63,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson09/index.html b/lesson09/index.html
index 99f568a..c42f90c 100644
--- a/lesson09/index.html
+++ b/lesson09/index.html
@@ -44,7 +44,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson10/index.html b/lesson10/index.html
index a189fcc..643c2c3 100644
--- a/lesson10/index.html
+++ b/lesson10/index.html
@@ -41,7 +41,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson11/index.html b/lesson11/index.html
index f3fa74a..73739a4 100644
--- a/lesson11/index.html
+++ b/lesson11/index.html
@@ -61,7 +61,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson12/index.html b/lesson12/index.html
index ff1709b..8ea5cf5 100644
--- a/lesson12/index.html
+++ b/lesson12/index.html
@@ -64,7 +64,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson13/index.html b/lesson13/index.html
index e961261..87a1e0d 100644
--- a/lesson13/index.html
+++ b/lesson13/index.html
@@ -133,7 +133,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson14/index.html b/lesson14/index.html
index 0c07947..8f43555 100644
--- a/lesson14/index.html
+++ b/lesson14/index.html
@@ -90,7 +90,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson15/index.html b/lesson15/index.html
index d53d0b4..7c563cd 100644
--- a/lesson15/index.html
+++ b/lesson15/index.html
@@ -93,7 +93,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {
diff --git a/lesson16/index.html b/lesson16/index.html
index 558a20e..ea7abf7 100644
--- a/lesson16/index.html
+++ b/lesson16/index.html
@@ -101,7 +101,22 @@
 
     function initGL(canvas) {
         try {
-            gl = canvas.getContext("experimental-webgl");
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var width = canvas.clientWidth;
+            var height = canvas.clientHeight;
+
+            // set the display size of the canvas.
+            canvas.style.width  = width  + "px";
+            canvas.style.height = height + "px";
+
+            // set the size of the drawingBuffer
+            canvas.width  = width  * devicePixelRatio;
+            canvas.height = height * devicePixelRatio;
+
+            gl = canvas.getContext("webgl");
+            if (gl == null) {
+                gl = canvas.getContext("experimental-webgl");
+            }
             gl.viewportWidth = canvas.width;
             gl.viewportHeight = canvas.height;
         } catch (e) {