canvasinput-rails 1.2.7.1

data/vendor/assets/javascripts/canvasinput/CanvasInput.js

@@ -0,0 +1,1475 @@
+/*!
+ *  CanvasInput v1.2.7
+ *  http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
+ *
+ *  (c) 2013-2017, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+(function() {
+  // create a buffer that stores all inputs so that tabbing
+  // between them is made possible.
+  var inputs = [];
+
+  // initialize the Canvas Input
+  var CanvasInput = window.CanvasInput = function(o) {
+    var self = this;
+
+    o = o ? o : {};
+
+    // setup the defaults
+    self._canvas = o.canvas || null;
+    self._ctx = self._canvas ? self._canvas.getContext('2d') : null;
+    self._x = o.x || 0;
+    self._y = o.y || 0;
+    self._extraX = o.extraX || 0;
+    self._extraY = o.extraY || 0;
+    self._fontSize = o.fontSize || 14;
+    self._fontFamily = o.fontFamily || 'Arial';
+    self._fontColor = o.fontColor || '#000';
+    self._placeHolderColor = o.placeHolderColor || '#bfbebd';
+    self._fontWeight = o.fontWeight || 'normal';
+    self._fontStyle = o.fontStyle || 'normal';
+    self._fontShadowColor = o.fontShadowColor || '';
+    self._fontShadowBlur = o.fontShadowBlur || 0;
+    self._fontShadowOffsetX = o.fontShadowOffsetX || 0;
+    self._fontShadowOffsetY = o.fontShadowOffsetY || 0;
+    self._readonly = o.readonly || false;
+    self._maxlength = o.maxlength || null;
+    self._width = o.width || 150;
+    self._height = o.height || self._fontSize;
+    self._padding = o.padding >= 0 ? o.padding : 5;
+    self._borderWidth = o.borderWidth >= 0 ? o.borderWidth : 1;
+    self._borderColor = o.borderColor || '#959595';
+    self._borderRadius = o.borderRadius >= 0 ? o.borderRadius : 3;
+    self._backgroundImage = o.backgroundImage || '';
+    self._boxShadow = o.boxShadow || '1px 1px 0px rgba(255, 255, 255, 1)';
+    self._innerShadow = o.innerShadow || '0px 0px 4px rgba(0, 0, 0, 0.4)';
+    self._selectionColor = o.selectionColor || 'rgba(179, 212, 253, 0.8)';
+    self._placeHolder = o.placeHolder || '';
+    self._value = (o.value || self._placeHolder) + '';
+    self._onsubmit = o.onsubmit || function() {};
+    self._onkeydown = o.onkeydown || function() {};
+    self._onkeyup = o.onkeyup || function() {};
+    self._onfocus = o.onfocus || function() {};
+    self._onblur = o.onblur || function() {};
+    self._cursor = false;
+    self._cursorPos = 0;
+    self._hasFocus = false;
+    self._selection = [0, 0];
+    self._wasOver = false;
+
+    // parse box shadow
+    self.boxShadow(self._boxShadow, true);
+
+    // calculate the full width and height with padding, borders and shadows
+    self._calcWH();
+
+    // setup the off-DOM canvas
+    self._renderCanvas = document.createElement('canvas');
+    self._renderCanvas.setAttribute('width', self.outerW);
+    self._renderCanvas.setAttribute('height', self.outerH);
+    self._renderCtx = self._renderCanvas.getContext('2d');
+
+    // setup another off-DOM canvas for inner-shadows
+    self._shadowCanvas = document.createElement('canvas');
+    self._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
+    self._shadowCanvas.setAttribute('height', self._height + self._padding * 2);
+    self._shadowCtx = self._shadowCanvas.getContext('2d');
+
+    // setup the background color
+    if (typeof o.backgroundGradient !== 'undefined') {
+      self._backgroundColor = self._renderCtx.createLinearGradient(
+        0,
+        0,
+        0,
+        self.outerH
+      );
+      self._backgroundColor.addColorStop(0, o.backgroundGradient[0]);
+      self._backgroundColor.addColorStop(1, o.backgroundGradient[1]);
+    } else {
+      self._backgroundColor = o.backgroundColor || '#fff';
+    }
+
+    // setup main canvas events
+    if (self._canvas) {
+      self._canvas.addEventListener('mousemove', function(e) {
+        e = e || window.event;
+        self.mousemove(e, self);
+      }, false);
+
+      self._canvas.addEventListener('mousedown', function(e) {
+        e = e || window.event;
+        self.mousedown(e, self);
+      }, false);
+
+      self._canvas.addEventListener('mouseup', function(e) {
+        e = e || window.event;
+        self.mouseup(e, self);
+      }, false);
+    }
+
+    // setup a global mouseup to blur the input outside of the canvas
+    var autoBlur = function(e) {
+      e = e || window.event;
+
+      if (self._hasFocus && !self._mouseDown) {
+        self.blur();
+      }
+    };
+    window.addEventListener('mouseup', autoBlur, true);
+    window.addEventListener('touchend', autoBlur, true);
+
+    // create the hidden input element
+    self._hiddenInput = document.createElement('input');
+    self._hiddenInput.type = 'text';
+    self._hiddenInput.style.position = 'absolute';
+    self._hiddenInput.style.opacity = 0;
+    self._hiddenInput.style.pointerEvents = 'none';
+    self._hiddenInput.style.zIndex = 0;
+    // hide native blue text cursor on iOS
+    self._hiddenInput.style.transform = 'scale(0)';
+
+    self._updateHiddenInput();
+    if (self._maxlength) {
+      self._hiddenInput.maxLength = self._maxlength;
+    }
+    document.body.appendChild(self._hiddenInput);
+    self._hiddenInput.value = self._value;
+
+    // setup the keydown listener
+    self._hiddenInput.addEventListener('keydown', function(e) {
+      e = e || window.event;
+
+      if (self._hasFocus) {
+        // hack to fix touch event bug in iOS Safari
+        window.focus();
+        self._hiddenInput.focus();
+
+        // continue with the keydown event
+        self.keydown(e, self);
+      }
+    });
+
+    // setup the keyup listener
+    self._hiddenInput.addEventListener('keyup', function(e) {
+      e = e || window.event;
+
+      // update the canvas input state information from the hidden input
+      self._value = self._hiddenInput.value;
+      self._cursorPos = self._hiddenInput.selectionStart;
+      // update selection to hidden input's selection in case user did keyboard-based selection
+      self._selection = [self._hiddenInput.selectionStart, self._hiddenInput.selectionEnd];
+      self.render();
+
+      if (self._hasFocus) {
+        self._onkeyup(e, self);
+      }
+    });
+
+    // add this to the buffer
+    inputs.push(self);
+    self._inputsIndex = inputs.length - 1;
+
+    // draw the text box
+    self.render();
+  };
+
+  // setup the prototype
+  CanvasInput.prototype = {
+    /**
+     * Get/set the main canvas.
+     * @param  {Object} data Canvas reference.
+     * @return {Mixed}      CanvasInput or current canvas.
+     */
+    canvas: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._canvas = data;
+        self._ctx = self._canvas.getContext('2d');
+
+        return self.render();
+      } else {
+        return self._canvas;
+      }
+    },
+
+    /**
+     * Get/set the x-position.
+     * @param  {Number} data The pixel position along the x-coordinate.
+     * @return {Mixed}      CanvasInput or current x-value.
+     */
+    x: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._x = data;
+        self._updateHiddenInput();
+
+        return self.render();
+      } else {
+        return self._x;
+      }
+    },
+
+    /**
+     * Get/set the y-position.
+     * @param  {Number} data The pixel position along the y-coordinate.
+     * @return {Mixed}      CanvasInput or current y-value.
+     */
+    y: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._y = data;
+        self._updateHiddenInput();
+
+        return self.render();
+      } else {
+        return self._y;
+      }
+    },
+
+    /**
+     * Get/set the extra x-position (generally used when no canvas is specified).
+     * @param  {Number} data The pixel position along the x-coordinate.
+     * @return {Mixed}      CanvasInput or current x-value.
+     */
+    extraX: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._extraX = data;
+        self._updateHiddenInput();
+
+        return self.render();
+      } else {
+        return self._extraX;
+      }
+    },
+
+    /**
+     * Get/set the extra y-position (generally used when no canvas is specified).
+     * @param  {Number} data The pixel position along the y-coordinate.
+     * @return {Mixed}      CanvasInput or current y-value.
+     */
+    extraY: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._extraY = data;
+        self._updateHiddenInput();
+
+        return self.render();
+      } else {
+        return self._extraY;
+      }
+    },
+
+    /**
+     * Get/set the font size.
+     * @param  {Number} data Font size.
+     * @return {Mixed}      CanvasInput or current font size.
+     */
+    fontSize: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontSize = data;
+
+        return self.render();
+      } else {
+        return self._fontSize;
+      }
+    },
+
+    /**
+     * Get/set the font family.
+     * @param  {String} data Font family.
+     * @return {Mixed}      CanvasInput or current font family.
+     */
+    fontFamily: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontFamily = data;
+
+        return self.render();
+      } else {
+        return self._fontFamily;
+      }
+    },
+
+    /**
+     * Get/set the font color.
+     * @param  {String} data Font color.
+     * @return {Mixed}      CanvasInput or current font color.
+     */
+    fontColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontColor = data;
+
+        return self.render();
+      } else {
+        return self._fontColor;
+      }
+    },
+
+    /**
+     * Get/set the place holder font color.
+     * @param  {String} data Font color.
+     * @return {Mixed}      CanvasInput or current place holder font color.
+     */
+    placeHolderColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._placeHolderColor = data;
+
+        return self.render();
+      } else {
+        return self._placeHolderColor;
+      }
+    },
+
+    /**
+     * Get/set the font weight.
+     * @param  {String} data Font weight.
+     * @return {Mixed}      CanvasInput or current font weight.
+     */
+    fontWeight: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontWeight = data;
+
+        return self.render();
+      } else {
+        return self._fontWeight;
+      }
+    },
+
+    /**
+     * Get/set the font style.
+     * @param  {String} data Font style.
+     * @return {Mixed}      CanvasInput or current font style.
+     */
+    fontStyle: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontStyle = data;
+
+        return self.render();
+      } else {
+        return self._fontStyle;
+      }
+    },
+
+    /**
+     * Get/set the font shadow color.
+     * @param  {String} data Font shadow color.
+     * @return {Mixed}      CanvasInput or current font shadow color.
+     */
+    fontShadowColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontShadowColor = data;
+
+        return self.render();
+      } else {
+        return self._fontShadowColor;
+      }
+    },
+
+    /**
+     * Get/set the font shadow blur.
+     * @param  {String} data Font shadow blur.
+     * @return {Mixed}      CanvasInput or current font shadow blur.
+     */
+    fontShadowBlur: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontShadowBlur = data;
+
+        return self.render();
+      } else {
+        return self._fontShadowBlur;
+      }
+    },
+
+    /**
+     * Get/set the font shadow x-offset.
+     * @param  {String} data Font shadow x-offset.
+     * @return {Mixed}      CanvasInput or current font shadow x-offset.
+     */
+    fontShadowOffsetX: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontShadowOffsetX = data;
+
+        return self.render();
+      } else {
+        return self._fontShadowOffsetX;
+      }
+    },
+
+    /**
+     * Get/set the font shadow y-offset.
+     * @param  {String} data Font shadow y-offset.
+     * @return {Mixed}      CanvasInput or current font shadow y-offset.
+     */
+    fontShadowOffsetY: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontShadowOffsetY = data;
+
+        return self.render();
+      } else {
+        return self._fontShadowOffsetY;
+      }
+    },
+
+    /**
+     * Get/set the width of the text box.
+     * @param  {Number} data Width in pixels.
+     * @return {Mixed}      CanvasInput or current width.
+     */
+    width: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._width = data;
+        self._calcWH();
+        self._updateCanvasWH();
+        self._updateHiddenInput();
+
+        return self.render();
+      } else {
+        return self._width;
+      }
+    },
+
+    /**
+     * Get/set the height of the text box.
+     * @param  {Number} data Height in pixels.
+     * @return {Mixed}      CanvasInput or current height.
+     */
+    height: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._height = data;
+        self._calcWH();
+        self._updateCanvasWH();
+        self._updateHiddenInput();
+
+        return self.render();
+      } else {
+        return self._height;
+      }
+    },
+
+    /**
+     * Get/set the padding of the text box.
+     * @param  {Number} data Padding in pixels.
+     * @return {Mixed}      CanvasInput or current padding.
+     */
+    padding: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._padding = data;
+        self._calcWH();
+        self._updateCanvasWH();
+
+        return self.render();
+      } else {
+        return self._padding;
+      }
+    },
+
+    /**
+     * Get/set the border width.
+     * @param  {Number} data Border width.
+     * @return {Mixed}      CanvasInput or current border width.
+     */
+    borderWidth: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._borderWidth = data;
+        self._calcWH();
+        self._updateCanvasWH();
+
+        return self.render();
+      } else {
+        return self._borderWidth;
+      }
+    },
+
+    /**
+     * Get/set the border color.
+     * @param  {String} data Border color.
+     * @return {Mixed}      CanvasInput or current border color.
+     */
+    borderColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._borderColor = data;
+
+        return self.render();
+      } else {
+        return self._borderColor;
+      }
+    },
+
+    /**
+     * Get/set the border radius.
+     * @param  {Number} data Border radius.
+     * @return {Mixed}      CanvasInput or current border radius.
+     */
+    borderRadius: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._borderRadius = data;
+
+        return self.render();
+      } else {
+        return self._borderRadius;
+      }
+    },
+
+    /**
+     * Get/set the background color.
+     * @param  {Number} data Background color.
+     * @return {Mixed}      CanvasInput or current background color.
+     */
+    backgroundColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._backgroundColor = data;
+
+        return self.render();
+      } else {
+        return self._backgroundColor;
+      }
+    },
+
+    /**
+     * Get/set the background gradient.
+     * @param  {Number} data Background gradient.
+     * @return {Mixed}      CanvasInput or current background gradient.
+     */
+    backgroundGradient: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._backgroundColor = self._renderCtx.createLinearGradient(
+          0,
+          0,
+          0,
+          self.outerH
+        );
+        self._backgroundColor.addColorStop(0, data[0]);
+        self._backgroundColor.addColorStop(1, data[1]);
+
+        return self.render();
+      } else {
+        return self._backgroundColor;
+      }
+    },
+
+    /**
+     * Get/set the box shadow.
+     * @param  {String} data     Box shadow in CSS format (1px 1px 1px rgba(0, 0, 0.5)).
+     * @param  {Boolean} doReturn (optional) True to prevent a premature render.
+     * @return {Mixed}          CanvasInput or current box shadow.
+     */
+    boxShadow: function(data, doReturn) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        // parse box shadow
+        var boxShadow = data.split('px ');
+        self._boxShadow = {
+          x: self._boxShadow === 'none' ? 0 : parseInt(boxShadow[0], 10),
+          y: self._boxShadow === 'none' ? 0 : parseInt(boxShadow[1], 10),
+          blur: self._boxShadow === 'none' ? 0 : parseInt(boxShadow[2], 10),
+          color: self._boxShadow === 'none' ? '' : boxShadow[3]
+        };
+
+        // take into account the shadow and its direction
+        if (self._boxShadow.x < 0) {
+          self.shadowL = Math.abs(self._boxShadow.x) + self._boxShadow.blur;
+          self.shadowR = self._boxShadow.blur + self._boxShadow.x;
+        } else {
+          self.shadowL = Math.abs(self._boxShadow.blur - self._boxShadow.x);
+          self.shadowR = self._boxShadow.blur + self._boxShadow.x;
+        }
+        if (self._boxShadow.y < 0) {
+          self.shadowT = Math.abs(self._boxShadow.y) + self._boxShadow.blur;
+          self.shadowB = self._boxShadow.blur + self._boxShadow.y;
+        } else {
+          self.shadowT = Math.abs(self._boxShadow.blur - self._boxShadow.y);
+          self.shadowB = self._boxShadow.blur + self._boxShadow.y;
+        }
+
+        self.shadowW = self.shadowL + self.shadowR;
+        self.shadowH = self.shadowT + self.shadowB;
+
+        self._calcWH();
+
+        if (!doReturn) {
+          self._updateCanvasWH();
+
+          return self.render();
+        }
+      } else {
+        return self._boxShadow;
+      }
+    },
+
+    /**
+     * Get/set the inner shadow.
+     * @param  {String} data In the format of a CSS box shadow (1px 1px 1px rgba(0, 0, 0.5)).
+     * @return {Mixed}          CanvasInput or current inner shadow.
+     */
+    innerShadow: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._innerShadow = data;
+
+        return self.render();
+      } else {
+        return self._innerShadow;
+      }
+    },
+
+    /**
+     * Get/set the text selection color.
+     * @param  {String} data Color.
+     * @return {Mixed}      CanvasInput or current selection color.
+     */
+    selectionColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._selectionColor = data;
+
+        return self.render();
+      } else {
+        return self._selectionColor;
+      }
+    },
+
+    /**
+     * Get/set the place holder text.
+     * @param  {String} data Place holder text.
+     * @return {Mixed}      CanvasInput or current place holder text.
+     */
+    placeHolder: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._placeHolder = data;
+
+        return self.render();
+      } else {
+        return self._placeHolder;
+      }
+    },
+
+    /**
+     * Get/set the current text box value.
+     * @param  {String} data Text value.
+     * @return {Mixed}      CanvasInput or current text value.
+     */
+    value: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._value = data + '';
+        self._hiddenInput.value = data + '';
+
+        // update the cursor position
+        self._cursorPos = self._clipText().length;
+
+        self.render();
+
+        return self;
+      } else {
+        return (self._value === self._placeHolder) ? '' : self._value;
+      }
+    },
+
+    /**
+     * Set or fire the onsubmit event.
+     * @param  {Function} fn Custom callback.
+     */
+    onsubmit: function(fn) {
+      var self = this;
+
+      if (typeof fn !== 'undefined') {
+        self._onsubmit = fn;
+
+        return self;
+      } else {
+        self._onsubmit();
+      }
+    },
+
+    /**
+     * Set or fire the onkeydown event.
+     * @param  {Function} fn Custom callback.
+     */
+    onkeydown: function(fn) {
+      var self = this;
+
+      if (typeof fn !== 'undefined') {
+        self._onkeydown = fn;
+
+        return self;
+      } else {
+        self._onkeydown();
+      }
+    },
+
+    /**
+     * Set or fire the onkeyup event.
+     * @param  {Function} fn Custom callback.
+     */
+    onkeyup: function(fn) {
+      var self = this;
+
+      if (typeof fn !== 'undefined') {
+        self._onkeyup = fn;
+
+        return self;
+      } else {
+        self._onkeyup();
+      }
+    },
+
+    /**
+     * Place focus on the CanvasInput box, placing the cursor
+     * either at the end of the text or where the user clicked.
+     * @param  {Number} pos (optional) The position to place the cursor.
+     * @return {CanvasInput}
+     */
+    focus: function(pos) {
+      var self = this;
+
+      // only fire the focus event when going from unfocussed
+      if (!self._hasFocus) {
+        self._onfocus(self);
+
+        // remove focus from all other inputs
+        for (var i=0; i<inputs.length; i++) {
+          if (inputs[i]._hasFocus) {
+            inputs[i].blur();
+          }
+        }
+      }
+
+      // remove selection
+      if (!self._selectionUpdated) {
+        self._selection = [0, 0];
+      } else {
+        delete self._selectionUpdated;
+      }
+
+      // if this is readonly, don't allow it to get focus
+      self._hasFocus = true;
+      if (self._readonly) {
+        self._hiddenInput.readOnly = true;
+      } else {
+        self._hiddenInput.readOnly = false;
+
+        // update the cursor position
+        self._cursorPos = (typeof pos === 'number') ? pos : self._clipText().length;
+
+        // clear the place holder
+        if (self._placeHolder === self._value) {
+          self._value = '';
+          self._hiddenInput.value = '';
+        }
+
+        self._cursor = true;
+
+        // setup cursor interval
+        if (self._cursorInterval) {
+          clearInterval(self._cursorInterval);
+        }
+        self._cursorInterval = setInterval(function() {
+          self._cursor = !self._cursor;
+          self.render();
+        }, 500);
+      }
+
+      // move the real focus to the hidden input
+      var hasSelection = (self._selection[0] > 0 || self._selection[1] > 0);
+      self._hiddenInput.focus();
+      self._hiddenInput.selectionStart = hasSelection ? self._selection[0] : self._cursorPos;
+      self._hiddenInput.selectionEnd = hasSelection ? self._selection[1] : self._cursorPos;
+
+      return self.render();
+    },
+
+    /**
+     * Removes focus from the CanvasInput box.
+     * @param  {Object} _this Reference to this.
+     * @return {CanvasInput}
+     */
+    blur: function(_this) {
+      var self = _this || this;
+
+      self._onblur(self);
+
+      if (self._cursorInterval) {
+        clearInterval(self._cursorInterval);
+      }
+      self._hasFocus = false;
+      self._cursor = false;
+      self._selection = [0, 0];
+      self._hiddenInput.blur();
+
+      // fill the place holder
+      if (self._value === '') {
+        self._value = self._placeHolder;
+      }
+
+      return self.render();
+    },
+
+    /**
+     * Fired with the keydown event to draw the typed characters.
+     * @param  {Event}       e    The keydown event.
+     * @param  {CanvasInput} self
+     * @return {CanvasInput}
+     */
+    keydown: function(e, self) {
+      var keyCode = e.which,
+        isShift = e.shiftKey,
+        key = null,
+        startText, endText;
+
+      // make sure the correct text field is being updated
+      if (self._readonly || !self._hasFocus) {
+        return;
+      }
+
+      // fire custom user event
+      self._onkeydown(e, self);
+
+      // add support for Ctrl/Cmd+A selection
+      if (keyCode === 65 && (e.ctrlKey || e.metaKey)) {
+        self.selectText();
+        e.preventDefault();
+        return self.render();
+      }
+
+      // block keys that shouldn't be processed
+      if (keyCode === 17 || e.metaKey || e.ctrlKey) {
+        return self;
+      }
+
+      if (keyCode === 13) { // enter key
+        e.preventDefault();
+        self._onsubmit(e, self);
+      } else if (keyCode === 9) { // tab key
+        e.preventDefault();
+        if (inputs.length > 1) {
+          var next = (inputs[self._inputsIndex + 1]) ? self._inputsIndex + 1 : 0;
+          self.blur();
+          setTimeout(function() {
+            inputs[next].focus();
+          }, 10);
+        }
+      }
+
+      // update the canvas input state information from the hidden input
+      self._value = self._hiddenInput.value;
+      self._cursorPos = self._hiddenInput.selectionStart;
+      self._selection = [0, 0];
+
+      return self.render();
+    },
+
+    /**
+     * Fired with the click event on the canvas, and puts focus on/off
+     * based on where the user clicks.
+     * @param  {Event}       e    The click event.
+     * @param  {CanvasInput} self
+     * @return {CanvasInput}
+     */
+    click: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y;
+
+      if (self._endSelection) {
+        delete self._endSelection;
+        delete self._selectionUpdated;
+        return;
+      }
+
+      if (self._canvas && self._overInput(x, y) || !self._canvas) {
+        if (self._mouseDown) {
+          self._mouseDown = false;
+          self.click(e, self);
+          return self.focus(self._clickPos(x, y));
+        }
+      } else {
+        return self.blur();
+      }
+    },
+
+    /**
+     * Fired with the mousemove event to update the default cursor.
+     * @param  {Event}       e    The mousemove event.
+     * @param  {CanvasInput} self
+     * @return {CanvasInput}
+     */
+    mousemove: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y,
+        isOver = self._overInput(x, y);
+
+      if (isOver && self._canvas) {
+        self._canvas.style.cursor = 'text';
+        self._wasOver = true;
+      } else if (self._wasOver && self._canvas) {
+        self._canvas.style.cursor = 'default';
+        self._wasOver = false;
+      }
+
+      if (self._hasFocus && self._selectionStart >= 0) {
+        var curPos = self._clickPos(x, y),
+          start = Math.min(self._selectionStart, curPos),
+          end = Math.max(self._selectionStart, curPos);
+
+        if (!isOver) {
+          self._selectionUpdated = true;
+          self._endSelection = true;
+          delete self._selectionStart;
+          self.render();
+          return;
+        }
+
+        if (self._selection[0] !== start || self._selection[1] !== end) {
+          self._selection = [start, end];
+          self.render();
+        }
+      }
+    },
+
+    /**
+     * Fired with the mousedown event to start a selection drag.
+     * @param  {Event} e    The mousedown event.
+     * @param  {CanvasInput} self
+     */
+    mousedown: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y,
+        isOver = self._overInput(x, y);
+
+      // setup the 'click' event
+      self._mouseDown = isOver;
+
+      // start the selection drag if inside the input
+      if (self._hasFocus && isOver) {
+        self._selectionStart = self._clickPos(x, y);
+      }
+    },
+
+    /**
+     * Fired with the mouseup event to end a selection drag.
+     * @param  {Event} e    The mouseup event.
+     * @param  {CanvasInput} self
+     */
+    mouseup: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y;
+
+      // update selection if a drag has happened
+      var isSelection = self._clickPos(x, y) !== self._selectionStart;
+      if (self._hasFocus && self._selectionStart >= 0 && self._overInput(x, y) && isSelection) {
+        self._selectionUpdated = true;
+        delete self._selectionStart;
+        self.render();
+      } else {
+        delete self._selectionStart;
+      }
+
+      self.click(e, self);
+    },
+
+    /**
+     * Select a range of text in the input.
+     * @param  {Array} range (optional) Leave blank to select all. Format: [start, end]
+     * @return {CanvasInput}
+     */
+    selectText: function(range) {
+      var self = this,
+        range = range || [0, self._value.length];
+
+      // select the range of text specified (or all if none specified)
+      setTimeout(function() {
+        self._selection = [range[0], range[1]];
+        self._hiddenInput.selectionStart = range[0];
+        self._hiddenInput.selectionEnd = range[1];
+        self.render();
+      }, 1);
+
+      return self;
+    },
+
+    /**
+     * Helper method to get the off-DOM canvas.
+     * @return {Object} Reference to the canvas.
+     */
+    renderCanvas: function() {
+      return this._renderCanvas;
+    },
+
+    /**
+     * Clears and redraws the CanvasInput on an off-DOM canvas,
+     * and if a main canvas is provided, draws it all onto that.
+     * @return {CanvasInput}
+     */
+    render: function() {
+      var self = this,
+        ctx = self._renderCtx,
+        w = self.outerW,
+        h = self.outerH,
+        br = self._borderRadius,
+        bw = self._borderWidth,
+        sw = self.shadowW,
+        sh = self.shadowH;
+
+      if (!ctx) {
+        return;
+      }
+
+      // clear the canvas
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+      // setup the box shadow
+      ctx.shadowOffsetX = self._boxShadow.x;
+      ctx.shadowOffsetY = self._boxShadow.y;
+      ctx.shadowBlur = self._boxShadow.blur;
+      ctx.shadowColor = self._boxShadow.color;
+
+      // draw the border
+      if (self._borderWidth > 0) {
+        ctx.fillStyle = self._borderColor;
+        self._roundedRect(ctx, self.shadowL, self.shadowT, w - sw, h - sh, br);
+        ctx.fill();
+
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
+      }
+
+      // draw the text box background
+      self._drawTextBox(function() {
+        // make sure all shadows are reset
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
+
+        // clip the text so that it fits within the box
+        var text = self._clipText();
+
+        // draw the selection
+        var paddingBorder = self._padding + self._borderWidth + self.shadowT;
+        if (self._selection[1] > 0) {
+          var selectOffset = self._textWidth(text.substring(0, self._selection[0])),
+            selectWidth = self._textWidth(text.substring(self._selection[0], self._selection[1]));
+
+          ctx.fillStyle = self._selectionColor;
+          ctx.fillRect(paddingBorder + selectOffset, paddingBorder, selectWidth, self._height);
+        }
+
+        // draw the cursor
+        if (self._cursor) {
+          var cursorOffset = self._textWidth(text.substring(0, self._cursorPos));
+          ctx.fillStyle = self._fontColor;
+          ctx.fillRect(paddingBorder + cursorOffset, paddingBorder, 1, self._height);
+        }
+
+        // draw the text
+        var textX = self._padding + self._borderWidth + self.shadowL,
+          textY = Math.round(paddingBorder + self._height / 2);
+
+        // only remove the placeholder text if they have typed something
+        text = (text === '' && self._placeHolder) ? self._placeHolder : text;
+
+        ctx.fillStyle = (self._value !== '' && self._value !== self._placeHolder) ? self._fontColor : self._placeHolderColor;
+        ctx.font = self._fontStyle + ' ' + self._fontWeight + ' ' + self._fontSize + 'px ' + self._fontFamily;
+        ctx.shadowColor = self._fontShadowColor;
+        ctx.shadowBlur = self._fontShadowBlur;
+        ctx.shadowOffsetX = self._fontShadowOffsetX;
+        ctx.shadowOffsetY = self._fontShadowOffsetY;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, textX, textY);
+
+        // parse inner shadow
+        var innerShadow = self._innerShadow.split('px '),
+          isOffsetX = self._innerShadow === 'none' ? 0 : parseInt(innerShadow[0], 10),
+          isOffsetY = self._innerShadow === 'none' ? 0 : parseInt(innerShadow[1], 10),
+          isBlur = self._innerShadow === 'none' ? 0 : parseInt(innerShadow[2], 10),
+          isColor = self._innerShadow === 'none' ? '' : innerShadow[3];
+
+        // draw the inner-shadow (damn you canvas, this should be easier than this...)
+        if (isBlur > 0) {
+          var shadowCtx = self._shadowCtx,
+            scw = shadowCtx.canvas.width,
+            sch = shadowCtx.canvas.height;
+
+          shadowCtx.clearRect(0, 0, scw, sch);
+          shadowCtx.shadowBlur = isBlur;
+          shadowCtx.shadowColor = isColor;
+
+          // top shadow
+          shadowCtx.shadowOffsetX = 0;
+          shadowCtx.shadowOffsetY = isOffsetY;
+          shadowCtx.fillRect(-1 * w, -100, 3 * w, 100);
+
+          // right shadow
+          shadowCtx.shadowOffsetX = isOffsetX;
+          shadowCtx.shadowOffsetY = 0;
+          shadowCtx.fillRect(scw, -1 * h, 100, 3 * h);
+
+          // bottom shadow
+          shadowCtx.shadowOffsetX = 0;
+          shadowCtx.shadowOffsetY = isOffsetY;
+          shadowCtx.fillRect(-1 * w, sch, 3 * w, 100);
+
+          // left shadow
+          shadowCtx.shadowOffsetX = isOffsetX;
+          shadowCtx.shadowOffsetY = 0;
+          shadowCtx.fillRect(-100, -1 * h, 100, 3 * h);
+
+          // create a clipping mask on the main canvas
+          self._roundedRect(ctx, bw + self.shadowL, bw + self.shadowT, w - bw * 2 - sw, h - bw * 2 - sh, br);
+          ctx.clip();
+
+          // draw the inner-shadow from the off-DOM canvas
+          ctx.drawImage(self._shadowCanvas, 0, 0, scw, sch, bw + self.shadowL, bw + self.shadowT, scw, sch);
+        }
+
+        // draw to the visible canvas
+        if (self._ctx) {
+          self._ctx.clearRect(self._x, self._y, ctx.canvas.width, ctx.canvas.height);
+          self._ctx.drawImage(self._renderCanvas, self._x, self._y);
+        }
+
+        return self;
+
+      });
+    },
+
+    /**
+     * Destroy this input and stop rendering it.
+     */
+    destroy: function() {
+      var self = this;
+
+      // pull from the inputs array
+      var index = inputs.indexOf(self);
+      if (index != -1) {
+        inputs.splice(index, 1);
+      }
+
+      // remove focus
+      if (self._hasFocus) {
+        self.blur();
+      }
+
+      // remove the hidden input box
+      document.body.removeChild(self._hiddenInput);
+
+      // remove off-DOM canvas
+      self._renderCanvas = null;
+      self._shadowCanvas = null;
+      self._renderCtx = null;
+    },
+
+    /**
+     * Draw the text box area with either an image or background color.
+     * @param  {Function} fn Callback.
+     */
+    _drawTextBox: function(fn) {
+      var self = this,
+        ctx = self._renderCtx,
+        w = self.outerW,
+        h = self.outerH,
+        br = self._borderRadius,
+        bw = self._borderWidth,
+        sw = self.shadowW,
+        sh = self.shadowH;
+
+      // only draw the background shape if no image is being used
+      if (self._backgroundImage === '') {
+        ctx.fillStyle = self._backgroundColor;
+        self._roundedRect(ctx, bw + self.shadowL, bw + self.shadowT, w - bw * 2 - sw, h - bw * 2 - sh, br);
+        ctx.fill();
+
+        fn();
+      } else {
+        var img = new Image();
+        img.src = self._backgroundImage;
+        img.onload = function() {
+          ctx.drawImage(img, 0, 0, img.width, img.height, bw + self.shadowL, bw + self.shadowT, w, h);
+
+          fn();
+        };
+      }
+    },
+
+    /**
+     * Deletes selected text in selection range and repositions cursor.
+     * @return {Boolean} true if text removed.
+     */
+    _clearSelection: function() {
+      var self = this;
+
+      if (self._selection[1] > 0) {
+        // clear the selected contents
+        var start = self._selection[0],
+          end = self._selection[1];
+
+        self._value = self._value.substr(0, start) + self._value.substr(end);
+        self._cursorPos = start;
+        self._cursorPos = (self._cursorPos < 0) ? 0 : self._cursorPos;
+        self._selection = [0, 0];
+
+        return true;
+      }
+
+      return false;
+    },
+
+    /**
+     * Clip the text string to only return what fits in the visible text box.
+     * @param  {String} value The text to clip.
+     * @return {String} The clipped text.
+     */
+    _clipText: function(value) {
+      var self = this;
+      value = (typeof value === 'undefined') ? self._value : value;
+
+      var textWidth = self._textWidth(value),
+        fillPer = textWidth / (self._width - self._padding),
+        text = fillPer > 1 ? value.substr(-1 * Math.floor(value.length / fillPer)) : value;
+
+      return text + '';
+    },
+
+    /**
+     * Gets the pixel with of passed text.
+     * @param  {String} text The text to measure.
+     * @return {Number}      The measured width.
+     */
+    _textWidth: function(text) {
+      var self = this,
+        ctx = self._renderCtx;
+
+      ctx.font = self._fontStyle + ' ' + self._fontWeight + ' ' + self._fontSize + 'px ' + self._fontFamily;
+      ctx.textAlign = 'left';
+
+      return ctx.measureText(text).width;
+    },
+
+    /**
+     * Recalculate the outer with and height of the text box.
+     */
+    _calcWH: function() {
+      var self = this;
+
+      // calculate the full width and height with padding, borders and shadows
+      self.outerW = self._width + self._padding * 2 + self._borderWidth * 2 + self.shadowW;
+      self.outerH = self._height + self._padding * 2 + self._borderWidth * 2 + self.shadowH;
+    },
+
+    /**
+     * Update the width and height of the off-DOM canvas when attributes are changed.
+     */
+    _updateCanvasWH: function() {
+      var self = this,
+        oldW = self._renderCanvas.width,
+        oldH = self._renderCanvas.height;
+
+      // update off-DOM canvas
+      self._renderCanvas.setAttribute('width', self.outerW);
+      self._renderCanvas.setAttribute('height', self.outerH);
+      self._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
+      self._shadowCanvas.setAttribute('height', self._height + self._padding * 2);
+
+      // clear the main canvas
+      if (self._ctx) {
+        self._ctx.clearRect(self._x, self._y, oldW, oldH);
+      }
+    },
+
+    /**
+     * Update the size and position of the hidden input (better UX on mobile).
+     */
+    _updateHiddenInput: function() {
+      var self = this;
+
+      self._hiddenInput.style.left = (self._x + self._extraX + (self._canvas ? self._canvas.offsetLeft : 0)) + 'px';
+      self._hiddenInput.style.top = (self._y + self._extraY + (self._canvas ? self._canvas.offsetTop : 0)) + 'px';
+      self._hiddenInput.style.width = (self._width + self._padding * 2) + 'px';
+      self._hiddenInput.style.height = (self._height + self._padding * 2) + 'px';
+    },
+
+    /**
+     * Creates the path for a rectangle with rounded corners.
+     * Must call ctx.fill() after calling this to draw the rectangle.
+     * @param  {Object} ctx Canvas context.
+     * @param  {Number} x   x-coordinate to draw from.
+     * @param  {Number} y   y-coordinate to draw from.
+     * @param  {Number} w   Width of rectangle.
+     * @param  {Number} h   Height of rectangle.
+     * @param  {Number} r   Border radius.
+     */
+    _roundedRect: function(ctx, x, y, w, h, r) {
+      if (w < 2 * r) r = w / 2;
+      if (h < 2 * r) r = h / 2;
+
+      ctx.beginPath();
+
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+      ctx.lineTo(x + w, y + h - r);
+      ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+      ctx.lineTo(x + r, y + h);
+      ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+      ctx.lineTo(x, y + r);
+      ctx.quadraticCurveTo(x, y, x + r, y);
+
+      ctx.closePath();
+    },
+
+    /**
+     * Checks if a coordinate point is over the input box.
+     * @param  {Number} x x-coordinate position.
+     * @param  {Number} y y-coordinate position.
+     * @return {Boolean}   True if it is over the input box.
+     */
+    _overInput: function(x, y) {
+      var self = this,
+        xLeft = x >= self._x + self._extraX,
+        xRight = x <= self._x + self._extraX + self._width + self._padding * 2,
+        yTop = y >= self._y + self._extraY,
+        yBottom = y <= self._y + self._extraY + self._height + self._padding * 2;
+
+      return xLeft && xRight && yTop && yBottom;
+    },
+
+    /**
+     * Use the mouse's x & y coordinates to determine
+     * the position clicked in the text.
+     * @param  {Number} x X-coordinate.
+     * @param  {Number} y Y-coordinate.
+     * @return {Number}   Cursor position.
+     */
+    _clickPos: function(x, y) {
+      var self = this,
+        value = self._value;
+
+      // don't count placeholder text in this
+      if (self._value === self._placeHolder) {
+        value = '';
+      }
+
+      // determine where the click was made along the string
+      var text = self._clipText(value),
+        totalW = 0,
+        pos = text.length;
+
+      if (x - (self._x + self._extraX) < self._textWidth(text)) {
+        // loop through each character to identify the position
+        for (var i=0; i<text.length; i++) {
+          totalW += self._textWidth(text[i]);
+          if (totalW >= x - (self._x + self._extraX)) {
+            pos = i;
+            break;
+          }
+        }
+      }
+
+      return pos;
+    },
+
+    /**
+     * Calculate the mouse position based on the event callback and the elements on the page.
+     * @param  {Event} e
+     * @return {Object}   x & y values
+     */
+    _mousePos: function(e) {
+      var elm = e.target,
+        x = e.pageX,
+        y = e.pageY;
+
+      // support touch events in page location calculation
+      if (e.touches && e.touches.length) {
+        elm = e.touches[0].target;
+        x = e.touches[0].pageX;
+        y = e.touches[0].pageY;
+      } else if (e.changedTouches && e.changedTouches.length) {
+        elm = e.changedTouches[0].target;
+        x = e.changedTouches[0].pageX;
+        y = e.changedTouches[0].pageY;
+      }
+
+      var style = document.defaultView.getComputedStyle(elm, undefined),
+        paddingLeft = parseInt(style['paddingLeft'], 10) || 0,
+        paddingTop = parseInt(style['paddingLeft'], 10) || 0,
+        borderLeft = parseInt(style['borderLeftWidth'], 10) || 0,
+        borderTop = parseInt(style['borderLeftWidth'], 10) || 0,
+        htmlTop = document.body.parentNode.offsetTop || 0,
+        htmlLeft = document.body.parentNode.offsetLeft || 0,
+        offsetX = 0,
+        offsetY = 0;
+
+      // calculate the total offset
+      if (typeof elm.offsetParent !== 'undefined') {
+        do {
+          offsetX += elm.offsetLeft;
+          offsetY += elm.offsetTop;
+        } while ((elm = elm.offsetParent));
+      }
+
+      // take into account borders and padding
+      offsetX += paddingLeft + borderLeft + htmlLeft;
+      offsetY += paddingTop + borderTop + htmlTop;
+
+      return {
+        x: x - offsetX,
+        y: y - offsetY
+      };
+    }
+  };
+})();