CanvasText

Kind: global class
Npmpackage:
Properties

Name	Type	Description
target	`CanvasDrawer`	the CanvasDrawer element in which to draw the text
id	`string`	an optional STRING defining the name by which the text will be referenced. Defaults to 'canvasdItemX' where X = the number of elements in a CanvasDrawer
text	`string`	the string of text for the canvas textfield. Supports line breaks <br>
css	`object`	standard css object, see properties:
css.x	`number`	NUMBER X coordinate for where to draw the image data
css.y	`number`	NUMBER Y coordinate for where to draw the image data
css.fontSize	`number` \| `string`	NUMBER or STRING (12, '12', '12px', or '12pt') representing the font size
css.fontFamily	`string`	STRING defining the font name
css.alignText	`string` \| `Align`	STRING or Align constant defining text's horizontal alingment: 'center', 'left', or 'right'. Can also use Align.CENTER, Align.LEFT, or Align.RIGHT.
css.scale	`number`	NUMBER for uniform scale of the text, scaling from drawing center unless transformOrigin is changed. Will compound with but not change values of scaleX or scaleY
css.scaleX	`number`	NUMBER for X scale of the text, scaling from drawing center unless transformOrigin is changed
css.scaleY	`number`	NUMBER for Y scale of the text, scaling from drawing center unless transformOrigin is changed
css.rotation	`number`	NUMBER IN DEGREES for the start rotation of the text
css.transformOrigin	`string`	an optional STRING defining an element's origin for scale and rotation, written as two values in a string with either a '%' or 'px' marker. Defaults to '0% 0%'
css.alpha	`number`	NUMBER for alpha of the drawing
css.dropShadow	`object`	an optional OBJECT defining properties of the text's drop shadow, see following properties:
css.dropShadow.angle	`number`	NUMBER IN DEGREES for the angle to position the shadow
css.dropShadow.distance	`number`	NUMBER for how far away from the text the shadow is
css.dropShadow.blur	`number`	NUMBER for how blurry the shadow is
css.dropShadow.color	`string` \| `object`	optional color of shadow as either a HEX STRING :"#ff0000", RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)", or an RGB/A OBJECT:{r:255,g:0,b:0} / {r:255,g:0,b:0,a:1}. Defaults to '#000000'
css.dropShadow.alpha	`number`	NUMBER for the alpha of the shadow. Defaults to 1, overrides the alpha of an RGBA color
offsetX	`number`	NUMBER representing the X offset of the text
offsetY	`number`	NUMBER representing the Y offset of the text
maxWidth	`number`	NUMBER which determines the maximum width of the text field, which is used to create MUTLI-LINE text
lineHeight	`number`	NUMBER which determines the line height between lines of text with defined maxWidth values
blendMode	`string` \| `CanvasBlendMode`	an optional STRING for the globalCompositeOperation - controls overlays, screens, multiply, masking, etc. Defaults to 'source-over'
fill	`string` \| `CanvasTexture`	an optional STRING or gradiant variable defining the color fill of the text. Defaults to none / invisible.
stroke	`object`	an optional OBJECT defining properties of the shape's stroke
stroke.fill	`string` \| `CanvasTexture`	an optional STRING or gradiant variable defining the color fill of the shape stroke. Defaults to none / invisible
stroke.width	`number`	an optional NUMBER value determining stroke width. Defaults to 0
stroke.position	`string`	an optional STRING determining if the stroke will be 'outer' or 'center'. Defaults to 'outer', there is no 'inner'
stroke.cap	`string`	an optional STRING value determining a line's cap style: 'butt', 'round', and 'square'. Defaults to 'butt'
stroke.join	`string`	an optional STRING value determining how two lines/corners connect: 'round', 'bevel', and 'miter'. Defaults to 'round'
dashSize	`number`	an optional NUMBER value determining the length of each segment in a dashed line
dashGap	`number`	an optional NUMBER value determining the gap between each segment in a dashed line. Defaults to 0, unless dashSize is defined, then defaults to dashSize
visible	`boolean`	an optional BOOLEAN that, when set to false, will not render the element. Defaults to true

CanvasText
- new CanvasText(textObj)
- .x : number
- .left : number
- .y : number
- .top : number
- .rotation : number
- .alpha : number
- .opacity : number
- .scale : number
- .scaleX : number
- .scaleY : number
- .blendMode : number
- .visible : boolean
- .transformOrigin : string
- .fontFamily : string
- .fontSize : number
- .lineHeight : number
- .maxWidth : number
- .alignText : string
- .fill : string
- .strokeFill : string
- .strokeWidth : number
- .strokeJoin : string
- .strokePosition : string
- .strokeDashSize : number
- .strokeDashGap : number
- .strokeDashOffset : number
- .shadowColor : string
- .shadowBlur : number
- .shadowAngle : number
- .shadowDistance : number
- .id : string
- .width : number
- .height : number

new CanvasText(textObj)

Add a text field to the drawer based on a given object, and return a reference to that text

import { CanvasText } from 'ad-canvas'

NOTE
transformOrigin is based on the text alignment. '0% 0%' for text aligned right will be at that text's TOP-RIGHT, '100% 0%' would be its TOP-LEFT. Centered and left-aligned text's '0% 0%' is its TOP-LEFT.

EXAMPLE
Adding a red text field with a yellow 4px outer stroke and an overlay blend mode.

var _myText = new CanvasText({
	target: View.main.myCanvasDrawer,
	id: 'textItem',
	text: 'Watch the Trailer',
	css: {
		x: 0,
		y: 0,
		fontSize: 40,
		fontFamily: 'FuturaBold',
		alignText: Align.LEFT,
		offsetX: -5,
		offsetY: 5,
		maxWidth: 50,
		lineHeight: 100
	},
	fill: 'red',
	stroke: {
		fill: 'yellow',
		position: 'outer',
		width: 4
	},
	blendMode: CanvasBlendMode.OVERLAY
})

Param	Type	Description
textObj	`object`	an object containing the arguments for defining / orienting the text, see Properties for more info: