From 8236002b7cf41b0179aab6ff0a5cd266046e6ab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?=
 =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?=
 <jisangs@gmail.com>
Date: Sun, 6 May 2018 13:48:45 +0900
Subject: [PATCH] Fix: apply RoundRectButton

---
 src/game/global/define_variables_global.js    |    3 +-
 src/game/lib/input_type_text.js               | 2781 ++++++++---------
 src/game/lib/round_rect_button.js             |  202 +-
 src/game/login/login.js                       |   75 +-
 .../RoundRectButton/round_rect_button_main.js |   39 +-
 5 files changed, 1528 insertions(+), 1572 deletions(-)

diff --git a/src/game/global/define_variables_global.js b/src/game/global/define_variables_global.js
index 92a4ee2..cdcc35c 100644
--- a/src/game/global/define_variables_global.js
+++ b/src/game/global/define_variables_global.js
@@ -16,8 +16,7 @@ function isReleaseMode() {
 }
 
 
-const GAME_SCREEN_SIZE = { x: 1024, y: 768 
-}
+const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
 
 
 let playerName;
diff --git a/src/game/lib/input_type_text.js b/src/game/lib/input_type_text.js
index 0015a9a..c9a77ab 100644
--- a/src/game/lib/input_type_text.js
+++ b/src/game/lib/input_type_text.js
@@ -1,67 +1,36 @@
-var InputTypeText = function(x, y) {
-  var bmd = game.add.bitmapData(400, 50);    
-  var myInput = game.add.sprite(x, y, bmd);
+class InputTypeText {
 
-  myInput.canvasInput = new CanvasInput({
-    canvas: bmd.canvas,
-    fontSize: 30,
-    fontFamily: 'Arial',
-    fontColor: '#212121',
-    fontWeight: 'bold',
-    width: 400,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: '#000',
-    borderRadius: 3,
-    boxShadow: '1px 1px 0px #fff',
-    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
-    placeHolder: 'Enter message here...'
-  });
-  myInput.inputEnabled = true;
-  myInput.input.useHandCursor = true;    
-  myInput.events.onInputUp.add(this.inputFocus, this);
+	constructor(x, y) {
+		var bmd = game.add.bitmapData(400, 50);
+		var myInput = game.add.sprite(x, y, bmd);
 
-  return myInput;
-};
+		myInput.canvasInput = new CanvasInput({
+			canvas: bmd.canvas,
+			fontSize: 30,
+			fontFamily: 'Arial',
+			fontColor: '#212121',
+			fontWeight: 'bold',
+			width: 400,
+			padding: 8,
+			borderWidth: 1,
+			borderColor: '#000',
+			borderRadius: 3,
+			boxShadow: '1px 1px 0px #fff',
+			innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
+			placeHolder: 'Enter message here...'
+		});
+		myInput.inputEnabled = true;
+		myInput.input.useHandCursor = true;
+		myInput.events.onInputUp.add(this.inputFocus, this);
 
-InputTypeText.prototype = {
-  inputFocus: function(sprite){
-    sprite.canvasInput.focus();
-  }
-};
+		return myInput;
+	}
 
-/*
-var inputFocus = function(sprite){
-  sprite.canvasInput.focus();
+	inputFocus(sprite){
+		sprite.canvasInput.focus();
+	}
 }
 
-var createInput = function(x, y){
-  var bmd = game.add.bitmapData(400, 50);    
-  var myInput = game.add.sprite(x, y, bmd);
-
-  myInput.canvasInput = new CanvasInput({
-    canvas: bmd.canvas,
-    fontSize: 30,
-    fontFamily: 'Arial',
-    fontColor: '#212121',
-    fontWeight: 'bold',
-    width: 400,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: '#000',
-    borderRadius: 3,
-    boxShadow: '1px 1px 0px #fff',
-    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
-    placeHolder: 'Enter message here...'
-  });
-  myInput.inputEnabled = true;
-  myInput.input.useHandCursor = true;    
-  myInput.events.onInputUp.add(this.inputFocus, this);
-
-  return myInput;
-}
-*/
-
 
 /*!
  *  CanvasInput v1.2.0
@@ -74,1352 +43,1352 @@ var createInput = function(x, y){
  */
 
 (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._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
-    window.addEventListener('mouseup', function(e) {
-      e = e || window.event;
-
-      if (self._hasFocus && !self._mouseDown) {
-        self.blur();
-      }
-    }, 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.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 + 'px';
-    self._hiddenInput.style.height = self._height + 'px';
-    self._hiddenInput.style.zIndex = 0;
-    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) {
-        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;
-      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;
-
-        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;
-
-        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;
-
-        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;
-
-        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 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();
-
-        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();
-
-        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;
-        return;
-      } 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.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) {
-        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);
-      }
-    },
-
-    /**
-     * 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,
-        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,
-        x, y;
-
-      // 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: e.pageX - offsetX,
-        y: e.pageY - offsetY
-      };
-    }
-  };
+	// 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._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
+		window.addEventListener('mouseup', function(e) {
+			e = e || window.event;
+
+			if (self._hasFocus && !self._mouseDown) {
+				self.blur();
+			}
+		}, 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.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 + 'px';
+		self._hiddenInput.style.height = self._height + 'px';
+		self._hiddenInput.style.zIndex = 0;
+		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) {
+				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;
+			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;
+
+				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;
+
+				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;
+
+				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;
+
+				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 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();
+
+				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();
+
+				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;
+				return;
+			} 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.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) {
+				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);
+			}
+		},
+
+		/**
+		 * 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,
+				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,
+				x, y;
+
+			// 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: e.pageX - offsetX,
+				y: e.pageY - offsetY
+			};
+		}
+	};
 })();
\ No newline at end of file
diff --git a/src/game/lib/round_rect_button.js b/src/game/lib/round_rect_button.js
index 67067ba..3b45fac 100644
--- a/src/game/lib/round_rect_button.js
+++ b/src/game/lib/round_rect_button.js
@@ -1,41 +1,41 @@
 class RoundRectButtonSetting {
 
-  constructor(width, height, roundAmount) {
-    this.width = width;
-    this.height = height;
-    this.roundAmount = 0;
-    if(typeof roundAmount === "undefined") {
-      let shorterSide = width > height ? height : width;
-      this.roundAmount = shorterSide * 0.1;
-    } else {
-      this.roundAmount = roundAmount;
-    }
+	constructor(width, height, roundAmount) {
+		this.width = width;
+		this.height = height;
+		this.roundAmount = 0;
+		if(typeof roundAmount === "undefined") {
+			let shorterSide = width > height ? height : width;
+			this.roundAmount = shorterSide * 0.1;
+		} else {
+			this.roundAmount = roundAmount;
+		}
 
-    this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
-    this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
-    this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
-  };
+		this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
+		this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
+		this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
+	};
 
 }
 
 RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
-  out: 0xffffff,
-  over: 0xddffdd,
-  down: 0xaaffaa,
-  disabled: 0x333333
+	out: 0xffffff,
+	over: 0xddffdd,
+	down: 0xaaffaa,
+	disabled: 0x333333
 };
 
 RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
-  out: "#000",
-  over: "#333",
-  down: "#666",
-  disabled: "#999"
+	out: "#000",
+	over: "#333",
+	down: "#666",
+	disabled: "#999"
 };
 
 RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
-  font: "30px Arial",
-  align: "center",
-  fill: "#fff"
+	font: "30px Arial",
+	align: "center",
+	fill: "#fff"
 };
 
 RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10;  // pixels
@@ -44,106 +44,106 @@ RoundRectButtonSetting.WHITE = 0xffffff;
 
 
 class RoundRectButton {
-  constructor(roundRectSetting, buttonText, clickEvent) {
-    this.setting = roundRectSetting;
-    this.clickEvent = clickEvent;
+	constructor(roundRectSetting, buttonText, clickEvent) {
+		this.setting = roundRectSetting;
+		this.clickEvent = clickEvent;
 
-    this.button = this.makeSprite();
-    this.text = this.makeText(buttonText);
+		this.button = this.makeSprite();
+		this.text = this.makeText(buttonText);
 
-    this.button.addChild(this.text);
-    this.button.anchor.setTo(0.5, 0.5);
+		this.button.addChild(this.text);
+		this.button.anchor.setTo(0.5, 0.5);
 
-    this.inputEnabled = true;
-    this.setEventMethod();
+		this.inputEnabled = true;
+		this.setEventMethod();
 
-    this.mouseOut();
-  }
+		this.mouseOut();
+	}
 
-  setEventMethod() {
-    this.button.events.onInputOver.add(function() {
-      this.mouseOver();
-    }, this);
+	setEventMethod() {
+		this.button.events.onInputOver.add(function() {
+			this.mouseOver();
+		}, this);
 
-    this.button.events.onInputOut.add(function() {
-      this.mouseOut();
-    }, this);
+		this.button.events.onInputOut.add(function() {
+			this.mouseOut();
+		}, this);
 
-    this.button.events.onInputDown.add(function() {
-      this.mouseDown();
+		this.button.events.onInputDown.add(function() {
+			this.mouseDown();
 
-      if(this.clickEvent) {
-        this.clickEvent();
-      }
-    }, this);
+			if(this.clickEvent) {
+				this.clickEvent();
+			}
+		}, this);
 
-    this.button.events.onInputUp.add(function() {
-      this.mouseOver();
-    }, this);
-  }
+		this.button.events.onInputUp.add(function() {
+			this.mouseOver();
+		}, this);
+	}
 
-  makeSprite() {
-    let btnTexture = new Phaser.Graphics()
-      .beginFill(RoundRectButtonSetting.WHITE)
-      .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
-      .endFill()
-      .generateTexture();
+	makeSprite() {
+		let btnTexture = new Phaser.Graphics()
+			.beginFill(RoundRectButtonSetting.WHITE)
+			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
+			.endFill()
+			.generateTexture();
 
-    return game.add.sprite(0, 0, btnTexture);
-  }
+		return game.add.sprite(0, 0, btnTexture);
+	}
 
-  makeText(textContent) {
-    let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
-    btnText.anchor.setTo(0.5);
-    btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING;
+	makeText(textContent) {
+		let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
+		btnText.anchor.setTo(0.5);
+		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING;
 
-    return btnText;
-  }
+		return btnText;
+	}
 
 
-  mouseOut() {
-    this.button.tint = this.setting.buttonColors.out;
-    this.text.fill = this.setting.textColors.out;
-  }
+	mouseOut() {
+		this.button.tint = this.setting.buttonColors.out;
+		this.text.fill = this.setting.textColors.out;
+	}
 
-  mouseOver() {
-    this.button.tint = this.setting.buttonColors.over;
-    this.text.fill = this.setting.textColors.over;
-  }
+	mouseOver() {
+		this.button.tint = this.setting.buttonColors.over;
+		this.text.fill = this.setting.textColors.over;
+	}
 
-  mouseDown() {
-    this.button.tint = this.setting.buttonColors.down;
-    this.text.fill = this.setting.textColors.down;
-  }
+	mouseDown() {
+		this.button.tint = this.setting.buttonColors.down;
+		this.text.fill = this.setting.textColors.down;
+	}
 
-  buttonDisabled() {
-    this.button.tint = this.setting.buttonColors.disabled;
-    this.text.fill = this.setting.textColors.disabled;
-  }
+	buttonDisabled() {
+		this.button.tint = this.setting.buttonColors.disabled;
+		this.text.fill = this.setting.textColors.disabled;
+	}
 
 
 
-  move(x, y) {
-    this.button.x = x;
-    this.button.y = y;
-  }
+	move(x, y) {
+		this.button.x = x;
+		this.button.y = y;
+	}
 
-  get inputEnabled() {
-    return this.button.inputEnabled;
-  }
+	get inputEnabled() {
+		return this.button.inputEnabled;
+	}
 
-  set inputEnabled(isEnabled) {
-    this.button.inputEnabled = isEnabled;
+	set inputEnabled(isEnabled) {
+		this.button.inputEnabled = isEnabled;
 
-    if(isEnabled === true) {
-      this.mouseOut();
-    } else {
-      this.buttonDisabled();
-    }
-  }
+		if(isEnabled === true) {
+			this.mouseOut();
+		} else {
+			this.buttonDisabled();
+		}
+	}
 
-  set lineSpacing(spacingInPixels) {
-    this.text.lineSpacing = spacingInPixels;
-  }
+	set lineSpacing(spacingInPixels) {
+		this.text.lineSpacing = spacingInPixels;
+	}
 }
 
diff --git a/src/game/login/login.js b/src/game/login/login.js
index 9a44bea..8cb7e9a 100644
--- a/src/game/login/login.js
+++ b/src/game/login/login.js
@@ -1,22 +1,30 @@
 /////////////////////////////
 // Login
 
-var Login = {
+let Login = {
+
+	self: {},
 
 	create: function() {
-		var self = this;
+		self = this;
 
 		this.game.stage.backgroundColor = '#4d4d4d';
-		
-		var phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
-		phaser.anchor.set(0.5);
-		phaser.alpha = 0.1;
-		game.stage.backgroundColor = '#4d4d4d';
 
+		// let phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
+		// phaser.anchor.set(0.5);
+		// phaser.alpha = 0.1;
+		// game.stage.backgroundColor = '#4d4d4d';
+
+		this.makeInputTypeTexts();
+
+		this.makeButton();
+	},
+
+	makeInputTypeTexts: function() {
 		// name
-		var textX = this.game.world.centerX - 360;
-		var inputX = this.game.world.centerX + 60;
-		var nameTextY = 340;
+		let textX = this.game.world.centerX - 360;
+		let inputX = this.game.world.centerX + 60;
+		const nameTextY = 340;
 		game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
 		.setTextBounds(0, 0, 200, 0)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -35,7 +43,7 @@ var Login = {
 		}
 
 		// birthday
-		var birthdayTextY = 400;
+		const birthdayTextY = 400;
 		game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic)
 		.setTextBounds(0, 0, 200, 0)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -52,44 +60,22 @@ var Login = {
 				self.startMenu();
 			}
 		}
-	
 
 		this.inputTextName.canvasInput.focus();
 		// this.inputTextBirthday.canvasInput.focus();
+	},
 
-		// start button
-		/*
-		var textStyle = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
-		var buttonText = game.add.text(0, 0, "시작", textStyle);
-		buttonText.addColor("#a0d", 0);
-		buttonText.anchor.setTo(0.5, 0.4);
-
-		var startButton = game.add.button(game.world.centerX, game.world.centerY + 140, 'button', this.startMenu, this, 2, 1, 0);
-		startButton.anchor.set(0.5);
-		startButton.inputEnabled = true;
-		startButton.input.priorityId = 1;
-		startButton.input.useHandCursor = true;
-		startButton.addChild(buttonText);
-		*/
-
+	makeButton: function() {
 		let setting = new RoundRectButtonSetting(200, 100);
-		setting.fontStyle = {
-			fontSize: "30px",
-			align: "center",
-			fontWeight: "",
-			stroke: "red",
-			strokeThickness: 5
-		};
+		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, "둥근 모서리\n버튼", this.startMenu);
+		let startButton = new RoundRectButton(setting, "시작", this.startMenu);
 		startButton.move(game.world.centerX, game.world.centerY + 140);
 	},
 
 	startMenu: function() {
-		var self = this;
-
-		playerName = this.inputTextName.canvasInput._value;
-		var birthday = this.inputTextBirthday.canvasInput._value;
+		playerName = self.inputTextName.canvasInput._value;
+		let birthday = self.inputTextBirthday.canvasInput._value;
 
 		xhr = new XMLHttpRequest();
 		xhr.onreadystatechange = function() {
@@ -98,12 +84,13 @@ var Login = {
 			// console.log("xhr.status : " + xhr.status);
 			if(xhr.readyState == 4 && xhr.status == 200) {
 				// console.log(xhr.responseText);
-				var jsonData = JSON.parse(xhr.responseText);
+				let jsonData = JSON.parse(xhr.responseText);
 				// console.log(JSON.stringify(jsonData));
 
 				// console.log(jsonData);
 				if(jsonData != null && jsonData["UserID"] != null) {
 					// login successed
+
 					self.loginSucceeded(jsonData);
 				} else {
 					// login failed
@@ -113,12 +100,12 @@ var Login = {
 		}
 		xhr.open('POST', 'login.php', true);
 		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-		var param = 'name=' + playerName + '&birthday=' + birthday;
+		let param = 'name=' + playerName + '&birthday=' + birthday;
 		// console.log(param);
 		xhr.send(param);
 
 		/*
-		var params = {
+		let params = {
 			'name': this.inputTextName.canvasInput._value,
 			'birthday': this.inputTextBirthday.canvasInput._value
 		};
@@ -126,7 +113,7 @@ var Login = {
 		console.log(JSON.stringify(params));
 
 		xhr.setRequestHeader("Content-type", "application/json");
-		// var data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
+		// let data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
 		xhr.send(data);
 		xhr.send(JSON.stringify(params));
 
@@ -146,4 +133,4 @@ var Login = {
 		console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
 	}
 
-}
\ No newline at end of file
+}
diff --git a/study/RoundRectButton/round_rect_button_main.js b/study/RoundRectButton/round_rect_button_main.js
index 31a1dc9..833ae80 100644
--- a/study/RoundRectButton/round_rect_button_main.js
+++ b/study/RoundRectButton/round_rect_button_main.js
@@ -2,35 +2,36 @@
 // Main game
 
 var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
-  {preload:preload, create:create, update:update, render:render});
+	{preload:preload, create:create, update:update, render:render}
+);
 
 function preload() {
-  // game.load.image('phaser', '../../resources/image/phaser.png');
-  // game.load.spritesheet('button', './image/button_basic.png', 200, 100);
+	// game.load.image('phaser', '../../resources/image/phaser.png');
+	// game.load.spritesheet('button', './image/button_basic.png', 200, 100);
 }
 
 function create() {
-  // var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
-  // i.anchor.set(0.5);
-  game.stage.backgroundColor = '#4d4d4d';
-  graphics = game.add.graphics(0, 0);
+	// var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
+	// i.anchor.set(0.5);
+	game.stage.backgroundColor = '#4d4d4d';
+	graphics = game.add.graphics(0, 0);
 
-  let setting = new RoundRectButtonSetting(200, 100);
-  setting.fontStyle = {
-    fontSize: "30px",
-    align: "center",
-    fontWeight: "",
-    stroke: "red",
-    strokeThickness: 5
-  };
+	let setting = new RoundRectButtonSetting(200, 100);
+	setting.fontStyle = {
+		fontSize: "30px",
+		align: "center",
+		fontWeight: "",
+		stroke: "red",
+		strokeThickness: 5
+	};
 
-  let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
-  button.move(200, 200);
-  // button.lineSpacing = -10;
+	let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
+	button.move(200, 200);
+	// button.lineSpacing = -10;
 }
 
 function dummy() {
-  console.log("print dummy");
+	console.log("print dummy");
 }
 
 function update() {