minor

css/main.less

@@ -128,7 +128,7 @@ header {
   height: 100%;
   width: 15rem;
   background: #262626;
-  display: block;
+  display: table;
   position: absolute;
   left: -15rem;
   top: 5rem;
@@ -136,6 +136,8 @@ header {
   font-family: 'MozTT-Light';
   font-size: 8pt;
   transition: left 0.2s ease-out;
+  border-collapse: collapse;
+  overflow: hidden;
 
   &.pulled {
     left: 0;
@@ -214,8 +216,8 @@ header {
     margin-top: 1rem;
   }
   .bottom {
-    position: absolute;
-    bottom: 5rem;
+    display: table-row;
+    vertical-align: bottom;
     button {
       margin-left: 3.5rem;
     }

js/functions.js

@@ -60,7 +60,7 @@ function undo() {
     window.points.history = history;
     window.points.history.last = history.last-1;
   } else {
-    c.clearRect(0,0, $c.width(), $c.height());
+    c.clearRect(0,0, width(), height());
     window.points = [];
     window.points.history = history;
     window.points.history.last = 0;
@@ -80,11 +80,11 @@ function redo() {
 }
 
 function width() {
-  return $c.width() * window.devicePixelRatio;
+  return +$c.attr('width');
 }
 
 function height() {
-  return ($c.height() - 53) * window.devicePixelRatio;
+  return +$c.attr('height'); 
 }
 
 function dataToBlob(data) {

js/mobile-events.js

@@ -174,7 +174,9 @@ function save() {
 
   $('#clear').on('tap', function() {
     c.clearRect(0, 0, width(), height());
+    var h = window.points.history;
     window.points = [];
+    window.points.history = h;
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }