CanvasInput recreates and improves a full DOM element within HTML5 Canvas.
More documentation, examples and demos can be found at CanvasInput.
Tested in the following browsers/versions:
<canvas id="canvas" width="200" height="50"></canvas>
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
<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...'
});
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).Number
(0
by default) X-coordinate position on the canvas.Number
(0
by default) Y-coordinate position on the canvas.Number
(0
by default) This is an optional x-value for use when no canvas is passed into CanvasInput.Number
(0
by default) This is an optional y-value for use when no canvas is passed into CanvasInput.Number
(14
by default) Text font size.String
(Arial
by default) Text font family.String
(#000
by default) Text color.String
(#bfbebd
by default) Place holder text color.String
(normal
by default) Font weight such as bold
or normal
.String
(normal
by default) Font style such as italic
or normal
.String
(''
by default) Shadow color for both placeholder and value text.String
(0
by default) Shadow blur for both placeholder and value text.String
(0
by default) Shadow x-offset for both placeholder and value text.String
(0
by default) Shadow y-offset for both placeholder and value text.Boolean
(false
by default) Set to true
to disable user input.Number
(null
by default) Sets the max length of characters.Number
(150
by default) The width of the text box (just like in the DOM, padding, borders and shadows add onto this width).Number
(14
by default) The height of the text box (just like in the DOM, padding, borders and shadows add onto this height).Number
(5
by default) The padding in pixels around all 4 sides of the text input area.Number
(1
by default) Size of the border.String
(#959595
by default) Color of the border.Number
(3
by default) Create rounded corners by setting a border radius.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).String
(#fff
by default) Sets the background color of the text box.Array
(['', '']
by default) Instead of a single background color, you can set a gradient of two colors.String
(1px 1px 0px rgba(255, 255, 255, 1)
by default) Define a box shadow just as you would with CSS.String
(0px 0px 4px rgba(0, 0, 0, 0.4)
by default) Define an inner-shadow just as you would with the box shadow.String
(rgba(179, 212, 253, 0.8)
by default) The default color for the text selection highlight.String
(''
by default) The default place holder text. This text will disappear when the user focusses on the input.String
(''
by default) Set the default value for an input.Function
(function() {}
by default) Callback fires when user hits the enter key.Function
(function() {}
by default) Callback fires on key down.Function
(function() {}
by default) Callback fires on key up.Function
(function() {}
by default) Callback fires on focus.Function
(function() {}
by default) Callback fires on blur (un-focus).In addition to getter/setter methods for each of the above properties, the following methods have also been made available.
Number
(optional) Set the default character position for the cursor. Goes to the end by default.Array
(optional) Leave empty to select all text, or pass range values in this form: [start, end]
.Copyright (c) 2013-2017 James Simpson and GoldFire Studios, Inc.
Released under the MIT License.