HDCanvas
The HDCanvas object provides an area on the page where you can draw lines, shapes, bitmap graphics, and more from
code.
By setting the object's properties, either at design-time in Handheld Designer, or at run-time in code, you can:
- Position and size the canvas with the
top,left,widthandheightproperties. - Get the objects drawing context by calling the
getContext()method.
Example:
// Draw on the canvas
var ctx = canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
Once you've obtained a canvas context from the HDCanvas object, you can draw on it using the standard API supported by the HTML5 <CANVAS> element. You can find additional information about the Canvas API from the following resources:
- The Canvas Tutorial, Mozilla Developer Network: https://developer.mozilla.org/en/Canvas_tutorial
- HTML5 Canvas Element, WHATWG: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
- HTML5 Canvas Tutorial, Html5CanvasTutorials.com: http://www.html5canvastutorials.com/
For more detail, view the full object documentation on HandheldDesigner.com.
Object Properties & Methods
| ▸ | Background | |
| backgroundAttachment | Determines whether the background scrolls with the page, or remains fixed. | |
| backgroundColor | The background color of the object. | |
| backgroundGradient | The background gradient of the object. | |
| backgroundImage | The background image of the object. | |
| backgroundPosition | Determines the starting position of the background image. | |
| backgroundRepeat | Sets how the background image will be repeated. | |
| ▸ | Borders | |
| borderBottomColor | The color of border on the bottom of the object. | |
| borderBottomStyle | The style of border on the bottom of the object (if any). | |
| borderBottomWidth | The width of the border on the bottom of the object, in pixels. | |
| borderColor | The color of the object's border. | |
| borderLeftColor | The color of border on the left edge of the object. | |
| borderLeftStyle | The style of border on the left edge of the object (if any). | |
| borderLeftWidth | The width of the border on the left edge of the object, in pixels. | |
| borderRadius | The radius of the corners of the object's border, in pixels. | |
| borderRightColor | The color of border on the right edge of the object. | |
| borderRightStyle | The style of border on the right edge of the object (if any). | |
| borderRightWidth | The width of the border on the right edge of the object, in pixels. | |
| borderStyle | The style of border surrounding the object (if any). | |
| borderTopColor | The color of border on the top of the object. | |
| borderTopStyle | The style of border on the top of the object (if any). | |
| borderTopWidth | The width of the border on the top of the object, in pixels. | |
| borderWidth | The width of the object's border, in pixels. | |
| boxShadow | Defines a shadow displayed behind the control. | |
| color | The color of the object. | |
| domElement | Method that returns the HTML DOM element associated with the HD object | |
| ▸ | Events | |
| onClick | Event that occurs when the object is tapped/clicked. | |
| onTouchEnd | Event that occurs at the end of a touch event. | |
| onTouchMove | Event that occurs during a touch event when the touch point moves. | |
| onTouchStart | Event that occurs when the object is touched. | |
| focus | Manually assign user focus to the control | |
| ▸ | Font & Text | |
| fontFamily | The font family used to render the text associated with object. | |
| fontSize | The font size used to render the text associated with object. | |
| fontStyle | The font style used to render the text associated with object. | |
| fontWeight | The font weight used to render the text associated with object. | |
| letterSpacing | Increase or decrease the amount of space between characters. | |
| lineHeight | Increase or decrease the amount of space between lines of text. | |
| textAlign | The font style used to render the text associated with object. | |
| textShadow | Defines a shadow displayed behind the text. | |
| getContext | Return the canvas context | |
| height | The height of the object, measured in pixels. | |
| id | The object's unique identifier. Also used as the variable name in code. | |
| left | The location of the left of the object from the left edge of the page, measured in pixels. | |
| locked | Locks the object in the design view, preventing it from being moved accidentally. | |
| opacity | A number between zero and one that determines the transparency of the object. | |
| ▸ | Padding | |
| padding | The space between the object's border and its content | |
| paddingBottom | The space between the object's bottom border and its content | |
| paddingLeft | The space between the object's left border and its content | |
| paddingRight | The space between the object's right border and its content | |
| paddingTop | The space between the object's top border and its content | |
| remove | Remove the object from the page | |
| styleClass | A reference to an HDStyleClass object defining a set of shared visual properties to be applied to this object. | |
| top | The location of the top of the object, as measured from the top of the page, in pixels. | |
| userdata | An object for storing user data. | |
| visible | Determines if the object is visible on the page. | |
| width | The width of the object, measured in pixels. | |
| zIndex | The stack order of the object. Objects with higher numbers appear in front of objects with lower numbers. | |
backgroundAttachment
PropertyFirst available in version 1.0.0
Determines whether the background scrolls with the page, or remains fixed. Can have one of the following values:
| "scroll" (or empty) | Background scrolls with the page. |
| "fixed" | Background is fixed and does not scroll with the page. |
Example:
// Set the background to fixed and not scroll with the page. object1.backgroundAttachment = "fixed";
backgroundColor
PropertyFirst available in version 1.0.0
The background color of the object. Colors can be specified as:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: "rgb(12,34,56)"
Example:
// get the background color of object1 var c = object1.backgroundColor; // set the color of object1 to grey object1.backgroundColor = "grey";
backgroundGradient
PropertyFirst available in version 1.0.0
The background gradient of the object. Can set to a string, using the CSS3 linear gradient syntax.
The HDGradient class provides an easy way to construct gradients. In addition, the HDGradient class
allows you to construct more complex gradients, including radial and repeating gradients.
Note: when setting a background gradient on an HDPage object, you almost certainly want to set the backgroundAttachment
property to "fixed". Otherwise your gradient will probably not be displayed correctly.
Example:
// set the background gradient of object1
// using CSS3 linear gradient syntax:
o1.backgroundGradient = "90deg, #00ABEB, blue 50%, red";
// same gradient, using HDGradient:
var g = new HDGradient();
g.angle = "90";
g.addStop("#00ABEB");
g.addStop("blue", "50%");
g.addStop("red");
o1.backgroundGradient = g;
backgroundImage
PropertyFirst available in version 1.0.0
The background image of the object.
Example:
// set the background image of object1 object1.backgroundImage = "images/background-image-1.png";
backgroundPosition
PropertyFirst available in version 1.0.0
Determines the starting position of the background image. Can be specified using one of the following forms:
| Keywords | A keyword specifying horizontal position (left/center/right) and one for vertical (top/center/bottom). For example: "left bottom". |
| Percentage | Horizontal position, then vertical position, expressed as percentages. For example: "25% 50%". |
| Pixel | Horizontal position, then vertical position, expressed as number of pixels. For example: "30px 50px". |
Example:
// Position the background centered on the page object1.backgroundPosition = "center center";
backgroundRepeat
PropertyFirst available in version 1.0.0
Sets how the background image will be repeated. Can have one of the following values:
| "repeat" (or empty) | Repeated both vertically and horizontally. |
| "repeat-x" | Repeated horizontally. |
| "repeat-y" | Repeated vertically. |
| "no-repeat" | Not repeated. |
Example:
// Set the background to only repeat horizontally. object1.backgroundRepeat = "repeat-x";
borderBottomColor
PropertyFirst available in version 1.0.0
The color of border on the bottom of the object. Colors can be specified as:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: rgb(12,34,56)
Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".
Example:
// get the bottom border color of object1 var c = object1.borderBottomColor; // set the bottom border color of object1 to grey object1.borderBottomColor = "grey";
borderBottomStyle
PropertyFirst available in version 1.0.0
The style of border on the bottom edge of the object. Can have the following values:
| "none" (or empty) | No border |
| "dotted" | Dotted border |
| "dashed" | Dashed border |
| "solid" | Solid border |
| "double" | Double-line border |
| "groove" | 3D grooved border |
| "ridge" | 3D ridged border |
| "inset" | 3D inset border |
| "outset" | 3D outset border |
Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".
Example:
// get the borderBottomStyle property of object1 var bs = object1.borderBottomStyle; // Give object1 a solid, black, 2-pixel border on its bottom edge. object1.borderBottomStyle = "solid"; object1.borderBottomColor = "black"; object1.borderBottomWidth = 2;
borderBottomWidth
PropertyFirst available in version 1.0.0
The width of the border on the bottom edge of the object, in pixels.
Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".
Example:
// get the borderBottomWidth property of object1 var w = object1.borderBottomWidth; // Give object1 a solid, black, 2-pixel border on its top edge object1.borderBottomStyle = "solid"; object1.borderBottomColor = "black"; object1.borderBottomWidth = 2;
borderColor
PropertyFirst available in version 1.0.0
The color of the object's border. Colors can be specified as:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: "rgb(12,34,56)"
Note: The property only has an effect if the object's borderStyle property is set to a value other than "none".
Example:
// get the border color of object1 var c = object1.borderColor; // set the border color of object1 to grey object1.borderColor = "grey";
borderLeftColor
PropertyFirst available in version 1.0.0
The color of border on the left of the object. Colors can be specified as:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: "rgb(12,34,56)"
Note: The property only has an effect if the object's borderLeftStyle property is set to a value other than "none".
Example:
// get the left border color of object1 var c = object1.borderLeftColor; // set the left border color of object1 to grey object1.borderLeftColor = "grey";
borderLeftStyle
PropertyFirst available in version 1.0.0
The style of border on the left edge of the object. Can have the following values:
| "none" (or empty) | No border |
| "dotted" | Dotted border |
| "dashed" | Dashed border |
| "solid" | Solid border |
| "double" | Double-line border |
| "groove" | 3D grooved border |
| "ridge" | 3D ridged border |
| "inset" | 3D inset border |
| "outset" | 3D outset border |
Example:
// get the borderLeftStyle property of object1 var bs = object1.borderLeftStyle; // Give object1 a solid, black, 2-pixel border on its left edge. object1.borderLeftStyle = "solid"; object1.borderLeftColor = "black"; object1.borderLeftWidth = 2;
borderLeftWidth
PropertyFirst available in version 1.0.0
The width of the border on the left edge of the object, in pixels.
Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".
Example:
// get the borderLeftWidth property of object1 var w = object1.borderLeftWidth; // Give object1 a solid, black, 2-pixel border on its top edge object1.borderLeftStyle = "solid"; object1.borderLeftColor = "black"; object1.borderLeftWidth = 2;
borderRadius
PropertyFirst available in version 1.0.0
The radius of the corners of the object's border, in pixels. With the default value of blank/zero, the border with have square corners.
Note: The property only has an effect if the object's borderStyle property is set to a value other than "none".
Example:
// get the borderRadius property of object1 var r = object1.borderRadius; // Give object1 a solid, black, 2-pixel border with rounded corners object1.borderStyle = "solid"; object1.borderColor = "black"; object1.borderWidth = 2; object1.borderRadius = 2;
borderRightColor
PropertyFirst available in version 1.0.0
The color of border on the right of the object. Colors can be specified as:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: "rgb(12,34,56)"
Note: The property only has an effect if the object's borderRightStyle property is set to a value other than "none".
Example:
// get the right border color of object1 var c = object1.borderRightColor; // set the right border color of object1 to grey object1.borderRightColor = "grey";
borderRightStyle
PropertyFirst available in version 1.0.0
The style of border on the right edge of the object. Can have the following values:
| "none" (or empty) | No border |
| "dotted" | Dotted border |
| "dashed" | Dashed border |
| "solid" | Solid border |
| "double" | Double-line border |
| "groove" | 3D grooved border |
| "ridge" | 3D ridged border |
| "inset" | 3D inset border |
| "outset" | 3D outset border |
Note: The property only has an effect if the object's borderRightStyle property is set to a value other than "none".
Example:
// get the borderRightStyle property of object1 var bs = object1.borderRightStyle; // Give object1 a solid, black, 2-pixel border on its right edge. object1.borderRightStyle = "solid"; object1.borderRightColor = "black"; object1.borderRightWidth = 2;
borderRightWidth
PropertyFirst available in version 1.0.0
The width of the border on the right edge of the object, in pixels.
Note: The property only has an effect if the object's borderRightStyle property is set to a value other than "none".
Example:
// get the borderRightWidth property of object1 var w = object1.borderRightWidth; // Give object1 a solid, black, 2-pixel border on its top edge object1.borderRightStyle = "solid"; object1.borderRightColor = "black"; object1.borderRightWidth = 2;
borderStyle
PropertyFirst available in version 1.0.0
The style of border surrounding the object. Can have the following values:
| "none" (or empty) | No border |
| "dotted" | Dotted border |
| "dashed" | Dashed border |
| "solid" | Solid border |
| "double" | Double-line border |
| "groove" | 3D grooved border |
| "ridge" | 3D ridged border |
| "inset" | 3D inset border |
| "outset" | 3D outset border |
Example:
// get the borderStyle property of object1 var bs = object1.borderStyle; // Give object1 a solid, black, 2-pixel border with rounded corners object1.borderStyle = "solid"; object1.borderColor = "black"; object1.borderWidth = 2; object1.borderRadius = 2;
borderTopColor
PropertyFirst available in version 1.0.0
The color of border on the top of the object. Colors can be specified as:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: "rgb(12,34,56)"
Note: The property only has an effect if the object's borderTopStyle property is set to a value other than "none".
Example:
// get the top border color of object1 var c = object1.borderTopColor; // set the top border color of object1 to grey object1.borderTopColor = "grey";
borderTopStyle
PropertyFirst available in version 1.0.0
The style of border on the top edge of the object. Can have the following values:
| "none" (or empty) | No border |
| "dotted" | Dotted border |
| "dashed" | Dashed border |
| "solid" | Solid border |
| "double" | Double-line border |
| "groove" | 3D grooved border |
| "ridge" | 3D ridged border |
| "inset" | 3D inset border |
| "outset" | 3D outset border |
Note: The property only has an effect if the object's borderTopStyle property is set to a value other than "none".
Example:
// get the borderTopStyle property of object1 var bs = object1.borderTopStyle; // Give object1 a solid, black, 2-pixel border on its top edge. object1.borderTopStyle = "solid"; object1.borderTopColor = "black"; object1.borderTopWidth = 2;
borderTopWidth
PropertyFirst available in version 1.0.0
The width of the border on the top edge of the object, in pixels.
Note: The property only has an effect if the object's borderTopStyle property is set to a value other than "none".
Example:
// get the borderTopWidth property of object1 var w = object1.borderTopWidth; // Give object1 a solid, black, 2-pixel border on its top edge object1.borderTopStyle = "solid"; object1.borderTopColor = "black"; object1.borderTopWidth = 2;
borderWidth
PropertyFirst available in version 1.0.0
The width of the object's border, in pixels.
Note: The property only has an effect if the object's borderStyle property is set to a value other than "none".
Example:
// get the borderWidth property of object1 var w = object1.borderWidth; // Give object1 a solid, black, 2-pixel border with rounded corners object1.borderStyle = "solid"; object1.borderColor = "black"; object1.borderWidth = 2; object1.borderRadius = 2;
boxShadow
PropertyFirst available in version 1.0.0
Defines a shadow displayed behind the control. You can define the color of the shadow, the x-axis and y-axis offsets, and the shadow's blur radius.
The box shadow is defined using CSS box-shadow syntax:
shadow-color x-axis-offset y-axis-offset blur-radius
For example, the value: "#cccccc 1px 1px 2px" defines a shadow with color #cccccc, a 1-pixel offset on
both the x- and y-axis, and a 2-pixel blur radius.
Code Example:
// get the boxShadow property of object1 var a = object1.boxShadow; // Set the text shadow of object1 object1.boxShadow = "#cccccc 1px 1px 2px";
color
PropertyFirst available in version 1.0.0
The color of the object. Colors can be specified in a number of ways:
- by name: "red", "blue", "green"
- by hex format: "#c0c0a0"
- by red/green/blue values: "rgb(12,34,56)"
Example:
// get the color of object1 var c = object1.color; // set the color of object1 to red object1.color = "red"; // set the color of object1 to red object1.color = "#ff0000"; // set the color of object1 to red object1.color = "rgb(255,0,0)";
domElement
MethodFirst available in version 1.0.0
Method that returns the HTML DOM element associated with the HD object.
Example:
// Get the object's DOM element var element = object1.domElement();
onClick
EventFirst available in version 1.0.0
Event that occurs when the object is tapped/clicked. The property is set by selecting an HDFunction object
within Handheld Designer, or defined at runtime.
In code, the property can be set to reference an existing function:
object1.onClick = someExistingFunction;
Or, you can define an anonymous function containing the code to be executed by the event:
object1.onClick = function(event) {
// this code will be executed when the event is triggered
object2.value = "The event was triggered";
};
onTouchEnd
EventFirst available in version 1.0.0
Event that occurs at the end of a touch event. The property is set by selecting an HDFunction object
within Handheld Designer, or defined at runtime.
In code, the property can be set to reference an existing function:
object1.onTouchEnd = someExistingFunction;
Or, you can define an anonymous function containing the code to be executed by the event:
object1.onTouchEnd = function(event) {
// this code will be executed when the event is triggered
object2.value = "The event was triggered";
};
Note: In most cases, the onClick event is simpler and more reliable then the lower-level touch-based events
(onTouchStart, onTouchMove, and onTouchEnd). However, the touch-based can be used if you
need immediate access to each touch event.
Event Properties
The event parameter passed to the onTouchEnd event has the following key properties:
touches: An array of "touch" objects, one for each finger touching the screen.targetTouches: An array of "touch" objects, one for each finger touching the object.changedTouches: An array of "touch" objects, one for each finger involved in the current event.
Each "touch" object contains the following properties:
identifier: A unique identification number for the touch point.screenX: The horizontal coordinate of point relative to the screen, in pixels.screenY: The vertical coordinate of point relative to the screen in pixels.pageX: The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.pageY: The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.clientX: The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.clientY: The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.
Example:
object1.onTouchEnd = function(event) {
// display the touch coordinates in a label
var touch = event.targetTouches[0];
label1.value = "Loc: " + touch.pageX + ", " + touch.pageY;
};
onTouchMove
EventFirst available in version 1.0.0
Event that occurs during a touch event when the touch point moves. The property is set by selecting an HDFunction object
within Handheld Designer, or defined at runtime.
In code, the property can be set to reference an existing function:
object1.onTouchMove = someExistingFunction;
Or, you can define an anonymous function containing the code to be executed by the event:
object1.onTouchMove = function(event) {
// this code will be executed when the event is triggered
object2.value = "The event was triggered";
};
Note: In most cases, the onClick event is simpler and more reliable then the lower-level touch-based events
(onTouchStart, onTouchMove, and onTouchEnd). However, the touch-based can be used if you
need immediate access to each touch event.
Event Properties
The event parameter passed to the onTouchMove event has the following key properties:
touches: An array of "touch" objects, one for each finger touching the screen.targetTouches: An array of "touch" objects, one for each finger touching the object.changedTouches: An array of "touch" objects, one for each finger involved in the current event.
Each "touch" object contains the following properties:
identifier: A unique identification number for the touch point.screenX: The horizontal coordinate of point relative to the screen, in pixels.screenY: The vertical coordinate of point relative to the screen in pixels.pageX: The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.pageY: The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.clientX: The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.clientY: The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.
Example:
object1.onTouchMove = function(event) {
// display the touch coordinates in a label
var touch = event.targetTouches[0];
label1.value = "Loc: " + touch.pageX + ", " + touch.pageY;
};
onTouchStart
EventFirst available in version 1.0.0
Event that occurs when the object is touched. The property is set by selecting an HDFunction object
within Handheld Designer, or defined at runtime.
In code, the property can be set to reference an existing function:
object1.onTouchStart = someExistingFunction;
Or, you can define an anonymous function containing the code to be executed by the event:
object1.onTouchStart = function(event) {
// this code will be executed when the event is triggered
object2.value = "The event was triggered";
};
Note: In most cases, the onClick event is simpler and more reliable then the lower-level touch-based events
(onTouchStart, onTouchMove, and onTouchEnd). However, the touch-based can be used if you
need immediate access to each touch event.
Event Properties
The event parameter passed to the onTouchStart event has the following key properties:
touches: An array of "touch" objects, one for each finger touching the screen.targetTouches: An array of "touch" objects, one for each finger touching the object.changedTouches: An array of "touch" objects, one for each finger involved in the current event.
Each "touch" object contains the following properties:
identifier: A unique identification number for the touch point.screenX: The horizontal coordinate of point relative to the screen, in pixels.screenY: The vertical coordinate of point relative to the screen in pixels.pageX: The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.pageY: The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.clientX: The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.clientY: The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.
Example:
object1.onTouchStart = function(event) {
// display the touch coordinates in a label
var touch = event.targetTouches[0];
label1.value = "Loc: " + touch.pageX + ", " + touch.pageY;
};
focus
MethodFirst available in version 1.3.1
The focus() method manually assigns user focus to the control.
Example:
// Give user focus to the textbox control. textbox1.focus();
fontFamily
PropertyFirst available in version 1.0.0
The font family used to render the text associated with object. Can be a generic family ("serif", "sans-serif") or a specific font family ("Helvetica", "Times New Roman").
Example:
// get the font family property of object1 var f = object1.fontFamily; // Set the font family of object1 to Helvetica Neue object1.fontFamily = "Helvetica Neue";
fontSize
PropertyFirst available in version 1.0.0
The font size used to render the text associated with object, in pixels.
Example:
// get the fontSize property of object1 var f = object1.fontSize; // Set the font size of object1 to 12 object1.fontSize = 12;
fontStyle
PropertyFirst available in version 1.0.0
The font style used to render the text associated with object. Property value can be:
| "normal" (or blank) | Normal text style |
| "italic" | Italic text style |
| "oblique" | Oblique text style |
Example:
// get the fontStyle property of object1 var f = object1.fontStyle; // Set the font style of object1 to "italic" object1.fontStyle = "italic";
fontWeight
PropertyFirst available in version 1.0.0
The font weight used to render the text associated with object. Property value can be:
| "normal" (or blank) | Normal font weight |
| "bold" | Bold font weight |
| "bolder" | Bolder font weight |
| "lighter" | Lighter font weight |
Example:
// get the fontWeight property of object1 var f = object1.fontWeight; // Set the font weight of object1 to "bold" object1.fontWeight = "bold";
letterSpacing
PropertyFirst available in version 1.0.0
The letterSpacing property increases or decreases the amount of space between characters.
Example:
// add one additional pixel between characters object1.letterSpacing = 1;
lineHeight
PropertyFirst available in version 1.0.0
Increase or decrease the amount of space between lines of text. Can be specified in the following forms:
| "normal" (or empty) | The default line height. |
| "number" | Multiple (or fraction) of the current font size. |
| "numberpx" | Line height in pixels. |
| "number%" | Percentage of current font size. |
Example:
// set the line height to 120% of the current font size object1.lineHeight = "120%";
textAlign
PropertyFirst available in version 1.0.0
The text alignment used to display the text associated with object. Property value can be:
| "left" (or blank) | Aligns text with the left edge of the object. |
| "right" | Aligns text with the right edge of the object. |
| "center" | Centers the text in the object. |
| "justify" | Full justification; adjusts the text so each line takes the full width of the object. |
Example:
// get the textAlign property of object1 var a = object1.textAlign; // Set the text alignment of object1 to "center" object1.textAlign = "center";
textShadow
PropertyFirst available in version 1.0.0
Defines a shadow displayed behind the text. You can define the color of the shadow, the x-axis and y-axis offsets, and the shadow's blur radius.
The text shadow is defined using CSS text-shadow syntax:
shadow-color x-axis-offset y-axis-offset blur-radius
For example, the value: "#cccccc 1px 1px 2px" defines a text shadow with color #cccccc, a 1-pixel offset on
both the x- and y-axis, and a 2-pixel blur radius.
Code Example:
// get the textShadow property of object1 var a = object1.textShadow; // Set the text shadow of object1 object1.textShadow = "#cccccc 1px 1px 2px";
getContext
MethodFirst available in version 1.0.0
The getContext() method returns the canvas context.
Usage:
var context = canvas1.getContext("2d");
Arguments:
| context type | Currently, "2d" is the only support context type. |
Example:
// Get the context from canvas and draw on it:
var ctx = canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
height
PropertyFirst available in version 1.0.0
The height of the object, measured in pixels.
Example:
// get the height of object1 var h = object1.height; // set the height of object1 object1.height = 64;
id
PropertyFirst available in version 1.0.0
The object's unique identifier. Also used as the variable name in code.
Example:
// get height of object with the id "object1". var h = object1.height;
left
PropertyFirst available in version 1.0.0
The location of the left of the object from the left edge of the page, measured in pixels.
Example:
// get the left location of object1 var x = object1.left; // set the left location of object1 object1.left = 64;
locked
PropertyFirst available in version 1.2.0
Locks the object in the design view, preventing it from being moved accidentally.
opacity
PropertyFirst available in version 1.0.0
A number between zero and one that determines the transparency of the object.
A value of 0 is fully transparent, 1 is fully opaque. A fractional
value indicates partial transparency. (For example, an object with a opacity value of 0.25 would be 25% opaque.)
Example:
// set the opacity object1 so that it's 50% opaque object1.opacity = 0.5;
padding
PropertyFirst available in version 1.0.0
The space between the object's border and its content, in pixels.
Example:
// get the padding property of object1 var p = object1.padding; // Set the padding of object1 to 4 pixels object1.padding = 4;
paddingBottom
PropertyFirst available in version 1.0.0
The space between the object's bottom border and its content, in pixels.
Example:
// get the bottom padding property of object1 var p = object1.paddingBottom; // Set the top padding of object1 to 4 pixels object1.paddingTop = 4;
paddingLeft
PropertyFirst available in version 1.0.0
The space between the object's left border and its content, in pixels.
Example:
// get the left padding property of object1 var p = object1.paddingBottom; // Set the left padding of object1 to 4 pixels object1.paddingLeft = 4;
paddingRight
PropertyFirst available in version 1.0.0
The space between the object's right border and its content, in pixels.
Example:
// get the right padding property of object1 var p = object1.paddingBottom; // Set the right padding of object1 to 4 pixels object1.paddingRight = 4;
paddingTop
PropertyFirst available in version 1.0.0
The space between the object's top border and its content, in pixels.
Example:
// get the top padding property of object1 var p = object1.paddingTop; // Set the top padding of object1 to 4 pixels object1.paddingTop = 4;
remove
MethodFirst available in version 1.0.0
The remove() method removes the object from the page. After calling remove(), any
further operations on the object are invalid.
Example:
// Remove the image object from the page: image1.remove();
styleClass
PropertyFirst available in version 1.0.0
A reference to an HDStyleClass object defining a set of shared visual properties to be applied to this object.
top
PropertyFirst available in version 1.0.0
The location of the top of the object, as measured from the top of the page, in pixels.
Example:
// get the top location of object1 var y = object1.top; // set the top location of object1 object1.top = 64;
userdata
PropertyFirst available in version 1.0.0
An JavaScript object for storing user data. You can use this property to store data for later use. (For example, to share data between event handlers.)
Example:
// track the number of times a button is clicked:
function button1_onClick(event) {
if(button1.userdata.timesClicked === undefined)
{
button1.userdata.timesClicked = 0;
}
else
{
button1.userdata.timesClicked++;
}
}
visible
PropertyFirst available in version 1.0.0
A true/false property that determines whether the object should be visible on the page.
Example:
// make object1 invisible object1.visible = false;
width
PropertyFirst available in version 1.0.0
The width of the object, measured in pixels.
Example:
// get the width of object1 var w = object1.width; // set the width of object1 object1.width = 64;
zIndex
PropertyFirst available in version 1.0.0
The stack order of the object. Objects with higher numbers appear in front of objects with lower numbers.
Example:
// "raise" the object var z = object1.zIndex; z += 10; object1.zIndex = z;
Copyright © 2010-2013, Handheld Designer, LLC, All Rights Reserved.
Made by hand in New England, USA.