Add 'backgroundColor' option to set color of the background on Signat…

…urePad#clear.
szimek · Sep 17, 2013 · d32fcbc · d32fcbc
1 parent 29b1cfb
commit d32fcbc
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/signature_pad.js b/signature_pad.js
@@ -28,11 +28,12 @@ var SignaturePad = (function (document) {
         this.dotSize = opts.dotSize || function () {
             return (this.minWidth + this.maxWidth) / 2;
         };
-        this.color = opts.color || "black";
+        this.penColor = opts.penColor || "black";
+        this.backgroundColor = opts.backgroundColor || "rgba(0,0,0,0)";
 
         this._canvas = canvas;
         this._ctx   = canvas.getContext("2d");
-        this._reset();
+        this.clear();
 
         // Handle mouse events
         this._mouseButtonDown = false;
@@ -107,7 +108,11 @@ var SignaturePad = (function (document) {
     };
 
     SignaturePad.prototype.clear = function () {
-        this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+        var ctx = this._ctx,
+            canvas = this._canvas;
+
+        ctx.fillStyle = this.backgroundColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
         this._reset();
     };
 
@@ -131,7 +136,7 @@ var SignaturePad = (function (document) {
         this._lastVelocity = 0;
         this._lastWidth = (this.minWidth + this.maxWidth) / 2;
         this._isEmpty = true;
-        this._ctx.fillStyle = this.color;
+        this._ctx.fillStyle = this.penColor;
     };
 
     SignaturePad.prototype._createPoint = function (event) {