From 0a1dad815c243b01a389395154b50819aca8dee0 Mon Sep 17 00:00:00 2001
From: russellmcc <russell.mcclellan@gmail.com>
Date: Tue, 5 Mar 2013 23:39:47 -0500
Subject: [PATCH 1/2] Support for apple devices with retina displays.

---
 js/jquery.kontrol.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/js/jquery.kontrol.js b/js/jquery.kontrol.js
index 5e3504e..af0070c 100644
--- a/js/jquery.kontrol.js
+++ b/js/jquery.kontrol.js
@@ -69,7 +69,8 @@
         this.rH = null; // release hook
 
         this.run = function () {
-            var cf = function (e, conf) {
+            var r = window.devicePixelRatio || 1, 
+                cf = function (e, conf) {
                 var k;
                 for (k in conf) {
                     s.o[k] = conf[k];
@@ -153,8 +154,10 @@
             (!this.o.displayInput) && this.$.hide();
 
             this.$c = $('<canvas width="' +
-                            this.o.width + 'px" height="' +
-                            this.o.height + 'px"></canvas>');
+                            this.o.width*r + 'px" height="' +
+                            this.o.height*r + 'px" style="width:'+
+                            this.o.width + 'px;height:' + this.o.height +
+                        'px;"></canvas>');
             this.c = this.$c[0].getContext("2d");
 
             this.$
@@ -191,13 +194,15 @@
 
             // canvas pre-rendering
             var d = true,
-                c = document.createElement('canvas');
+                c = document.createElement('canvas'),
+                r = window.devicePixelRatio || 1;
 
-            c.width = s.o.width;
-            c.height = s.o.height;
+            c.width = s.o.width*r;
+            c.height = s.o.height*r;
             s.g = c.getContext('2d');
-
+            
             s.clear();
+            s.g.scale(r, r);
 
             s.dH
             && (d = s.dH());

From 108fe0604db6877b8dfe0daf536fb8a7ab31ad20 Mon Sep 17 00:00:00 2001
From: russellmcc <russell.mcclellan@gmail.com>
Date: Wed, 6 Mar 2013 15:27:14 -0500
Subject: [PATCH 2/2] oops!  fix for a bug where the bars wouldn't clear
 correctly due to the retina scaling.

---
 js/jquery.kontrol.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/jquery.kontrol.js b/js/jquery.kontrol.js
index af0070c..7e56f06 100644
--- a/js/jquery.kontrol.js
+++ b/js/jquery.kontrol.js
@@ -56,6 +56,7 @@
         this.y = 0; // canvas y position
         this.mx = 0; // x value of mouse down point of the current mouse move
         this.my = 0; // y value of mouse down point of the current mose move
+        this.r = 1; // cached devicePixelRatio
         this.$c = null; // jQuery canvas element
         this.c = null; // rendered canvas context
         this.t = 0; // touches index
@@ -69,8 +70,7 @@
         this.rH = null; // release hook
 
         this.run = function () {
-            var r = window.devicePixelRatio || 1, 
-                cf = function (e, conf) {
+            var cf = function (e, conf) {
                 var k;
                 for (k in conf) {
                     s.o[k] = conf[k];
@@ -153,9 +153,10 @@
 
             (!this.o.displayInput) && this.$.hide();
 
+            this.r = window.devicePixelRatio || 1;
             this.$c = $('<canvas width="' +
-                            this.o.width*r + 'px" height="' +
-                            this.o.height*r + 'px" style="width:'+
+                            this.o.width*this.r + 'px" height="' +
+                            this.o.height*this.r + 'px" style="width:'+
                             this.o.width + 'px;height:' + this.o.height +
                         'px;"></canvas>');
             this.c = this.$c[0].getContext("2d");
@@ -194,15 +195,14 @@
 
             // canvas pre-rendering
             var d = true,
-                c = document.createElement('canvas'),
-                r = window.devicePixelRatio || 1;
+                c = document.createElement('canvas');
 
-            c.width = s.o.width*r;
-            c.height = s.o.height*r;
+            c.width = s.o.width*s.r;
+            c.height = s.o.height*s.r;
             s.g = c.getContext('2d');
             
             s.clear();
-            s.g.scale(r, r);
+            s.g.scale(s.r, s.r);
 
             s.dH
             && (d = s.dH());
@@ -993,10 +993,10 @@
             if (this.col) {
                 // current col
                 this.c.clearRect(
-                    this.col * (this.colWidth + this.o.spacing)
+                    this.col * (this.colWidth + this.o.spacing) * this.r
                     , 0
-                    , this.colWidth + this.o.spacing
-                    , this.o.height
+                    , (this.colWidth + this.o.spacing) * this.r
+                    , this.o.height * this.r
                 );
             } else {
                 this._clear();