From 3f17f819d440dd49431b02912c53962593642c62 Mon Sep 17 00:00:00 2001
From: Mahdi Dibaiee <mdibaiee@aol.com>
Date: Wed, 5 Feb 2014 20:08:28 +0330
Subject: [PATCH] clear fix

---
 js/events.js        | 11 ++++++-----
 js/functions.js     | 14 +++++++++++---
 js/mobile-events.js | 11 ++++++-----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/js/events.js b/js/events.js
index f910013..f1faa65 100644
--- a/js/events.js
+++ b/js/events.js
@@ -9,7 +9,7 @@ function save() {
       }
       c.fillStyle = 'white';
       c.globalCompositeOperation = 'destination-over';
-      c.fillRect(0, 0, $c.width(), $c.height());
+      c.fillRect(0, 0, width(), height());
       c.fillStyle = cache.fillStyle;
       c.globalCompositeOperation = cache.composite;
       break;
@@ -21,7 +21,7 @@ function save() {
       }
       c.fillStyle = settings.strokeStyle;
       c.globalCompositeOperation = 'destination-over';
-      c.fillRect(0, 0, $c.width(), $c.height());
+      c.fillRect(0, 0, width(), height());
       c.fillStyle = cache.fillStyle;
       c.globalCompositeOperation = cache.composite;
       break;
@@ -59,7 +59,7 @@ function save() {
     }
 
     window.points.history.push({
-      data: c.getImageData(0, 0, $c.width(), $c.height()),
+      data: c.getImageData(0, 0, width(), height()),
       points: window.points.slice(0)
     })
     window.points.history.last = window.points.history.length-1;
@@ -168,13 +168,14 @@ function save() {
   // Bottom
 
   $('#clear').click(function() {
-    c.clearRect(0, 0, $c.width(), $c.height());
+    c.clearRect(0, 0, width(), height());
+    window.points = [];
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }
 
     window.points.history.push({
-      data: c.getImageData(0, 0, $c.width(), $c.height()),
+      data: c.getImageData(0, 0, width(), height()),
       points: []
     })
     window.points.history.last = window.points.history.length-1;
diff --git a/js/functions.js b/js/functions.js
index 4c48306..5fcb5d5 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -7,19 +7,19 @@ function sizeAndPos() {
   var w = $(window).width(),
       h = $(window).height();
   $c.attr('width', w * window.devicePixelRatio);
-  $c.attr('height',h * window.devicePixelRatio - 53 * window.devicePixelRatio);
+  $c.attr('height',(h - 53) * window.devicePixelRatio);
   $c.css({
     'width' : w,
     'height' : h - 53
   });
-  c.clearRect(0,0, $c.width(), $c.height());
+  c.clearRect(0,0, width(), height());
   c.putImageData(data, 0, 0);
 }
 
 function relative(x,y) {
   return {
     x : x*window.devicePixelRatio,
-    y : y*window.devicePixelRatio - 53 * window.devicePixelRatio
+    y : (y - 53) * window.devicePixelRatio
   }
 }
 
@@ -79,6 +79,14 @@ function redo() {
   }
 }
 
+function width() {
+  return $c.width() * window.devicePixelRatio;
+}
+
+function height() {
+  return ($c.height() - 53) * window.devicePixelRatio;
+}
+
 function dataToBlob(data) {
   var binary = atob(data.split(',')[1]), array = [];
   var type = data.split(',')[0].split(':')[1].split(';')[0];
diff --git a/js/mobile-events.js b/js/mobile-events.js
index 2f0fee7..3228578 100644
--- a/js/mobile-events.js
+++ b/js/mobile-events.js
@@ -9,7 +9,7 @@ function save() {
       }
       c.fillStyle = 'white';
       c.globalCompositeOperation = 'destination-over';
-      c.fillRect(0, 0, $c.width(), $c.height());
+      c.fillRect(0, 0, width(), height());
       c.fillStyle = cache.fillStyle;
       c.globalCompositeOperation = cache.composite;
       break;
@@ -21,7 +21,7 @@ function save() {
       }
       c.fillStyle = settings.strokeStyle;
       c.globalCompositeOperation = 'destination-over';
-      c.fillRect(0, 0, $c.width(), $c.height());
+      c.fillRect(0, 0, width(), height());
       c.fillStyle = cache.fillStyle;
       c.globalCompositeOperation = cache.composite;
       break;
@@ -66,7 +66,7 @@ function save() {
     }
 
     window.points.history.push({
-      data: c.getImageData(0, 0, $c.width(), $c.height()),
+      data: c.getImageData(0, 0, width(), height()),
       points: window.points.slice(0)
     })
     window.points.history.last = window.points.history.length-1;
@@ -173,13 +173,14 @@ function save() {
   // Bottom
 
   $('#clear').on('tap', function() {
-    c.clearRect(0, 0, $c.width(), $c.height());
+    c.clearRect(0, 0, width(), height());
+    window.points = [];
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }
 
     window.points.history.push({
-      data: c.getImageData(0, 0, $c.width(), $c.height()),
+      data: c.getImageData(0, 0, width(), height()),
       points: []
     })
     window.points.history.last = window.points.history.length-1;