Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
canvasinput
Advanced tools
CanvasInput recreates and improves a full DOM element within HTML5 Canvas.
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.
FAQs
CanvasInput recreates and improves a full DOM element within HTML5 Canvas.
The npm package canvasinput receives a total of 3 weekly downloads. As such, canvasinput popularity was classified as not popular.
We found that canvasinput demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.