I always say, "don't reinvent the wheel, let somebody else do it." Well, today, I'm that somebody. We've been hard at work for over a year building our ambitious new HTML5 game, CasinoRPG, and we've had to solve many challenges along the way. For example, I wrote and open-sourced a robust audio library, howler.js just a few months back, which has dramatically improved our and other's use of audio in the browser.

Well, the current challenge has to do with UI within the game. In this case, the "I" stands for input rather than interface. Yes, we could just use use a DOM input element, but that almost feels like cheating. Our goal from the start was to build a fully HTML5/Canvas massively multiplayer game, and that goes down to the tiniest details.

So, over the weekend, I decided to attempt the recreation of the DOM input tag in full. It turned out to be dramatically more complicated than I ever imagined, but the experience was certainly rewarding, and I'm now open-sourcing those efforts for the community. Enjoy, and please contribute back if you find bugs or improvements!

Features

• Closest recreation of a DOM input in canvas to date
• Full CSS-type styling
• Text selection
• Tab between inputs
• Full native copy/paste support
• Text place holder support
• Readonly property support
• Auto text scrolling
• Uses an off-DOM canvas for efficiency
• Supports all keyboard types
• Caps lock support

Documentation

Examples

Most basic, default text box:

<canvas id="canvas" width="200" height="50"></canvas>

var input = new CanvasInput({
  canvas: document.getElementById('canvas')
});

More styling options:

<canvas id="canvas" width="350" height="50"></canvas>

var input = new CanvasInput({
  canvas: document.getElementById('canvas'),
  fontSize: 18,
  fontFamily: 'Arial',
  fontColor: '#212121',
  fontWeight: 'bold',
  width: 300,
  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...'
});

Properties

• canvas: Object (null by default) Specify a canvas element to draw the text box to (the off-DOM canvas can be accessed through a helper method if you want to leave this blank and handle it on your own).
• x: Number (0 by default) X-coordinate position on the canvas.
• y: Number (0 by default) Y-coordinate position on the canvas.
• extraX: Number (0 by default) This is an optional x-value for use when no canvas is passed into CanvasInput.
• extraY: Number (0 by default) This is an optional y-value for use when no canvas is passed into CanvasInput.
• fontSize: Number (14 by default) Text font size.
• fontFamily: String (Arial by default) Text font family.
• fontColor: String (#000 by default) Text color.
• placeHolderColor: String (#bfbebd by default) Place holder text color.
• fontWeight: String (normal by default) Font weight such as bold or normal.
• fontStyle: String (normal by default) Font style such as italic or normal.
• readonly: Boolean (false by default) Set to true to disable user input.
• width: Number (150 by default) The width of the text box (just like in the DOM, padding, borders and shadows add onto this width).
• height: Number (14 by default) The height of the text box (just like in the DOM, padding, borders and shadows add onto this height).
• padding: Number (5 by default) The padding in pixels around all 4 sides of the text input area.
• borderWidth: Number (1 by default) Size of the border.
• borderColor: String (#959595 by default) Color of the border.
• borderRadius: Number (3 by default) Create rounded corners by setting a border radius.
• backgroundImage: String ('' by default) Use an image instead of styling for the background (it is usually best to set borderWidth to 0, backgroundColor to 'none' and the inner and box shadows to 'none' when using this).
• backgroundColor: String (#fff by default) Sets the background color of the text box.
• backgroundGradient: Array (['', ''] by default) Instead of a single background color, you can set a gradient of two colors.
• boxShadow: String (1px 1px 0px rgba(255, 255, 255, 1) by default) Define a box shadow just as you would with CSS.
• innerShadow: String (0px 0px 4px rgba(0, 0, 0, 0.4) by default) Define an inner-shadow just as you would with the box shadow.
• selectionColor: String (rgba(179, 212, 253, 0.8) by default) The default color for the text selection highlight.
• placeHolder: String ('' by default) The default place holder text. This text will disappear when the user focusses on the input.
• value: String ('' by default) Set the default value for an input.
• onsubmit: Function (function() {} by default) Callback fires when user hits the enter key.
• onkeydown: Function (function() {} by default) Callback fires on key down.
• onkeyup: Function (function() {} by default) Callback fires on key up.

Methods

In addition to getter/setter methods for each of the above properties, the following methods have also been made available.

• focus: Sets the focus on the input box (focus must already be on the canvas element).
• pos: Number (optional) Set the default character position for the cursor. Goes to the end by default.
• blur: Removes the focus from the text input box.
• renderCanvas: Returns the off-DOM canvas, allowing you to draw its contents to whatever canvas you would like (or do whatever else with the data that you want).
• render: This rerenders the full input box.
• selectText: Select part or all of the text in the input box programmatically.
• range: Array (optional) Leave empty to select all text, or pass range values in this form: [start, end].
• destroy: Destroy the input and stop rendering it.