API Docs for: 6.0.1
Show:

Phrase Class

Extends Entity
Module: scrawlPhrase

Phrase

Instantiation

  • scrawl.makePhrase()

Purpose

  • Defines text objects for displaying on a Cell's canvas
  • Handles all related font functionality
  • Performs text drawing operations on canvases

Access

  • scrawl.entity.PHRASENAME - for the Phrase entity object

Constructor

Phrase

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Item Index

Methods

addBackgroundColor

(
  • ctx
  • here
)
private chainable

Drawing function - stamps a background block onto the <canvas> element

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • here Vector

    Start coordinates for rectangle

Returns:

This

animationPositionClone

() private

Position.setDelta hook function - modified by animation extension

animationPositionGet

() private

Position.get hook function - modified by animation extension

animationPositionInit

() private

Position constructor hook function - modified by animation extension

animationPositionSet

() private

Position.set hook function - modified by animation extension

checkFont

(
  • items
)
private chainable

Helper function - checks to see if font needs to be (re)constructed from its parts

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

checkHit

(
  • items
)

Check Cell coordinates to see if any of them fall within this entity's path - uses JavaScript's isPointInPath function

Argument object contains the following attributes:

  • tests - an array of Vector coordinates to be checked; alternatively can be a single Vector
  • x - X coordinate
  • y - Y coordinate

Either the 'tests' attribute should contain a Vector, or an array of vectors, or the x and y attributes should be set to Number values

Parameters:

  • items Object

    Argument object

Returns:

The first coordinate to fall within the entity's path; false if none fall within the path

clear

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:545

Stamp helper function - perform a 'clear' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

clearShadow

(
  • ctx
  • cell
)
private chainable

Stamp helper function - clear shadow parameters during a multi draw operation (drawFill and fillDraw methods)

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

clearWithBackground

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:572

Stamp helper function - perform a 'clearWithBackground' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

clip

(
  • ctx
  • cellname
  • cell
)
private chainable

Stamp helper function - perform a 'clip' method draw

Note: not supported by this entity

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cellname String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • cell Object

    scrawl Cell object

Returns:

This

clone

(
  • items
)
chainable

Inherited from Base but overwritten in source\scrawlPhrase.js:297

Augments Entity.clone()

Parameters:

  • items Object

    Object consisting of key:value attributes, used to update the clone's attributes with new values

Returns:

Cloned object

collisionsEntityConstructor

() private

Entity constructor hook function - modified by collisions extension

collisionsEntityRegisterInLibrary

() private

Entity.registerInLibrary hook function - modified by collisions extension

collisionsEntitySet

() private

Entity.set hook function - modified by collisions extension

collisionsEntitySetDelta

() private

Entity.setDelta hook function - modified by collisions extension

constructFont

(
  • items
)
private chainable

Helper function - creates entity's Context object's phrase attribute from other font-related attributes

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

correctCoordinates

(
  • coords
  • [cell]
)

Stamp helper function - correct mouse coordinates if pad dimensions not equal to base cell dimensions

Parameters:

  • coords Object

    An object containing x and y attributes

  • [cell] String optional

    CELLNAME String

Returns:

Amended coordinate object

deconstructFont

(
  • items
)
private chainable

Helper function - creates font-related attributes from entity's Context object's font attribute

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

draw

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:597

Stamp helper function - perform a 'draw' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

drawFill

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:653

Stamp helper function - perform a 'drawFill' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

dropEntity

(
  • [items]
)
chainable

Revert pickupEntity() actions, ensuring entity is left where the user drops it

Parameters:

  • [items] String optional

    Alternative pivot String

Returns:

This

fill

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:625

Stamp helper function - perform a 'fill' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

fillDraw

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:681

Stamp helper function - perform a 'fillDraw' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

filtersEntityInit

() private

Entity constructor hook function - modified by filters extension

floatOver

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:737

Stamp helper function - perform a 'floatOver' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

forceStamp

(
  • [method]
  • [cellname]
  • [cell]
  • [mouse]
)
chainable

Stamp function - instruct entity to draw itself on a Cell's <canvas> element, regardless of the setting of its visibility attribute

Permitted methods include:

  • 'draw' - stroke the entity's path with the entity's strokeStyle color, pattern or gradient
  • 'fill' - fill the entity's path with the entity's fillStyle color, pattern or gradient
  • 'drawFill' - stroke, and then fill, the entity's path; if a shadow offset is present, the shadow is added only to the stroke action
  • 'fillDraw' - fill, and then stroke, the entity's path; if a shadow offset is present, the shadow is added only to the fill action
  • 'floatOver' - stroke, and then fill, the entity's path; shadow offset is added to both actions
  • 'sinkInto' - fill, and then stroke, the entity's path; shadow offset is added to both actions
  • 'clear' - fill the entity's path with transparent color 'rgba(0, 0, 0, 0)'
  • 'clearWithBackground' - fill the entity's path with the Cell's current backgroundColor
  • 'clip' - clip the drawing zone to the entity's path (not tested)
  • 'none' - perform all necessary updates, but do not draw the entity onto the canvas

Parameters:

  • [method] String optional

    Permitted method attribute String; by default, will use entity's own method setting

  • [cellname] String optional

    CELLNAME of cell on which entitys are to draw themselves

  • [cell] Object optional

    cell wrapper object

  • [mouse] Vector optional

    coordinates to be used for any entity currently pivoted to a mouse/touch event

Returns:

This

get

(
  • item
)

Inherited from Base but overwritten in source\scrawlCore.js:7351

Augments Position.get()

Allows users to retrieve a entity's Context object's values via the entity

Parameters:

  • item String

    attribute key string

Returns:

Attribute value

getChanges

(
  • ctx
)
private chainable

Interrogates a <canvas> element's context engine and populates its own attributes with returned values

(Only for use by Context objects)

Parameters:

  • ctx Object

    <canvas> element context engine Object

Returns:

This

getContextFromEngine

(
  • ctx
)
private chainable

Interrogates a <canvas> element's context engine and populates its own attributes with returned values

(Only for use by Context objects)

Parameters:

  • ctx Object

    <canvas> element context engine Object

Returns:

This

getEntityCell

() private

Helper function - get a entity's cell onbject

Returns:

Cell object

getGroup

(
  • [items]
)
private

Constructor helper function - discover this entity's default group affiliation

Parameters:

  • [items] Object optional

    Constructor argument

Returns:

GROUPNAME String

getHandleValues

() private

Entity.getHandleValues

getMaxDimensions

(
  • cell
  • entity
)
private

Calculate the box position of the entity

Returns an object with the following attributes:

  • left - x coordinate of top-left corner of the enclosing box relative to the current cell's top-left corner
  • top - y coordinate of top-left corner of the enclosing box relative to the current cell's top-left corner
  • bottom - x coordinate of bottom-right corner of the enclosing box relative to the current cell's top-left corner
  • left - y coordinate of bottom-right corner of the enclosing box relative to the current cell's top-left corner

Parameters:

  • cell Object

    object

  • entity Object

    object

Returns:

dimensions object

getMetrics

(
  • cellname
)
private chainable

Helper function - calculate entity's width and height attributes, taking into account font size, scaling, etc

Parameters:

  • cellname String

    CELLNAME String (any <canvas> will do for this function)

Returns:

This

getOffset

() private

Drawing function - get entity offset values

Returns an object with coordinates x and y

Returns:

JavaScript object

getReferenceDimensions

(
  • reference
)
W: width, h: height, c: centered private

updateCurrentHandle helper object

Parameters:

  • reference Object

    object - Stack, Pad, Element, Cell or Entity (Block, Wheel, Phrase, Picture, Path, Shape or Frame)

Returns:

W: width, h: height, c: centered:

Object with attributes

getStart

()

Entity.getStart

getStartValues

() private

Entity.getStartValues

getX

()

Get the current start x coordinate

Returns:

Attribute value

getY

()

Get the current start y coordinate

Returns:

Attribute value

multiline

(
  • items
)
private chainable

Helper function - creates Text objects for each line of text in a multiline Phrase

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

none

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:765

Stamp helper function - perform a 'none' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

numberConvert

(
  • val
  • dim
)
private

Stamp helper function - convert string percentage values to numerical values

Parameters:

  • val String

    coordinate String

  • dim Number

    dimension value

Returns:

Number - value

parse

()

Turn the object into a JSON String

Returns:

object of object's currently set attributes

pathPositionInit

() private

Position constructor hook function - modified by path extension

pathPositionSetDelta

() private

Position.setDelta hook function - modified by path extension

pathStamp

() private

Entity.stamp hook function - modified by path extension

pickupEntity

(
  • items
)
chainable

Set entity's pivot to 'mouse'; set handles to supplied Vector value; set order to +9999

Parameters:

  • items Vector

    Coordinate vector; alternatively an object with {x, y} attributes can be used

Returns:

This

registerInLibrary

() private chainable

Constructor helper function - register entity object in the scrawl library

Returns:

This

resetCollisionPoints

() chainable

stamp helper function - amended by collisions extension

Returns:

this

restoreShadow

(
  • ctx
  • cell
)
private chainable

Stamp helper function - clear shadow parameters during a multi draw operation (Phrase text-along-path drawFill and fillDraw methods)

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

rotateCell

(
  • ctx
  • cell
)
private chainable

Stamp helper function - rotate and position canvas ready for drawing entity

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    Cell name

Returns:

This

set

(
  • items
)
chainable

Inherited from Base but overwritten in source\scrawlPhrase.js:234

Augments Entity.set()

Allows users to:

  • alter the font either by the font attribute, or by individual font content attributes
  • update the text
  • change other Entity and Phrase object attributes

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDelta

(
  • items
)
chainable

Inherited from Context but overwritten in source\scrawlPhrase.js:268

Augments Entity.detDelta()

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDeltaHandle

(
  • items
)
chainable

Adds the value of each attribute supplied in the argument to existing values. This function accepts handle, handleX, handleY

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDeltaHeight

(
  • items
)
chainable

Adds the value of each attribute supplied in the argument to existing values. This function accepts height

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDeltaRoll

(
  • items
)
chainable

Adds the value of each attribute supplied in the argument to existing values. This function accepts roll

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDeltaScale

(
  • items
)
chainable

Adds the value of each attribute supplied in the argument to existing values. This function accepts scale

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDeltaStart

(
  • items
)
chainable

Adds the value of each attribute supplied in the argument to existing values; This function accepts start, startX, startY

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDeltaWidth

(
  • items
)
chainable

Adds the value of each attribute supplied in the argument to existing values. This function accepts width

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setHandle

(
  • items
)
chainable

Augments Base.setHandle(), to allow users to set the handle attributes using handle, handleX, handleY

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setStampUsingPivot

(
  • [cell]
)
private chainable

Stamp helper function - set this entity, cell or element start values to its pivot entity/point start value, or to the current mouse coordinates

Takes into account lock flag settings

Parameters:

  • [cell] String optional

    CELLNAME String

Returns:

This

setStart

(
  • items
)
chainable

Augments Base.setStart(), to allow users to set the start attributes using start, startX, startY

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

sinkInto

(
  • ctx
  • cell
)
private chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:709

Stamp helper function - perform a 'sinkInto' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

stamp

(
  • [method]
  • [cellname]
  • [cell]
  • [mouse]
)
chainable

Inherited from Entity but overwritten in source\scrawlPhrase.js:521

Augments Entity.stamp()

Parameters:

  • [method] String optional

    Permitted method attribute String; by default, will use entity's own method setting

  • [cellname] String optional

    CELLNAME of cell on which entitys are to draw themselves

  • [cell] Object optional

    cell wrapper object

  • [mouse] Vector optional

    coordinates to be used for any entity currently pivoted to a mouse/touch event

Returns:

This

stampFilter

() private

Entity.stamp hook function - modified by filters extension

updateCurrentHandle

() private chainable

Convert handle percentage values to numerical values, stored in currentHandle

Returns:

This

updateCurrentStart

(
  • reference
)
private chainable

Convert start percentage values to numerical values, stored in currentStart

Parameters:

  • reference Object

    object - Stack, Pad, Element, Cell or Entity (Block, Wheel, Phrase, Picture, Path, Shape or Frame)

Returns:

This

Properties

backgroundColor

String

Background color - any permitted CSS Color string

Default: ''

backgroundMargin

Number

Background margin - additional padding around the text (in pixels), colored in by the background color

Default: 0

comment

String

Comment, for accessibility

Default: ''

context

String private

CTXNAME of this Entity's Context object

Default: ''

data

String

Current SVGTiny data string for the entity (only supported by Path and Shape entitys)

Default: ''

deltaPathPlace

Number

(Added by the path extension) A change value which can be applied to the object's pathPlace attribute

Default: 0

family

String

Font family property - any permitted CSS font family String

Note: a font needs to be pre-loaded by the web page before the <canvas> element can successfully use it

Default: 'sans-serif'

fastStamp

Boolean

Display cycle flag; if set to true, entity will not change the <canvas> element's context engine's settings before drawing itself on the cell

Default: false

fillStyle

String

Color, gradient or pattern used to fill a entity. Can be:

  • Cascading Style Sheet format color String - '#fff', '#ffffff', 'rgb(255,255,255)', 'rgba(255,255,255,1)', 'white'
  • COLORNAME String
  • GRADIENTNAME String
  • RADIALGRADIENTNAME String
  • PATTERNNAME String

Default: '#000000'

fixedWidth

Boolean

Fixed width attribute for text along path. When using fixed width (monospace) fonts, set this flag to true for faster rendering

Note: the path module needs to be added to the core to use this functionality

Default: false

flipReverse

Boolean

Reflection flag; set to true to flip entity, cell or element along the Y axis

Default: false

flipUpend

Boolean

Reflection flag; set to true to flip entity, cell or element along the X axis

Default: false

font

String

Cascading Style Sheet font String, for Phrase entitys

Default: '10pt sans-serif'

globalAlpha

Number

Entity transparency - a value between 0 and 1, where 0 is completely transparent and 1 is completely opaque

Default: 1

globalCompositeOperation

String

Compositing method for applying the entity to an existing Cell (<canvas>) display. Permitted values include

  • 'source-over'
  • 'source-atop'
  • 'source-in'
  • 'source-out'
  • 'destination-over'
  • 'destination-atop'
  • 'destination-in'
  • 'destination-out'
  • 'lighter'
  • 'darker'
  • 'copy'
  • 'xor'

Be aware that different browsers render these operations in different ways, and some options are not supported by all browsers

Default: 'source-over'

group

String

GROUPNAME String for this entity's default group

Note: a entity can belong to more than one group by being added to other Group objects via the scrawl.addEntitysToGroups() and Group.addEntityToGroup() functions

Default: ''

handle

Object

An Object (in fact, a Vector) containing offset instructions from the object's rotation/flip point, where drawing commences.

SubScrawl, and all Objects that prototype chain to Subscrawl, supports the following 'virtual' attributes for this attribute:

  • handleX - (Mixed) the horizontal offset, either as a Number (in pixels), or a percentage String of the object's width, or the String literal 'left', 'right' or 'center'
  • handleY - (Mixed) the vertical offset, either as a Number (in pixels), or a percentage String of the object's height, or the String literal 'top', 'bottom' or 'center'

Where values are Numbers, handle can be treated like any other Vector

height

Number

Entity, cell or element height (in pixels)

Default: 0

lineCap

String

Line cap styling. Permitted values include:

  • 'butt'
  • 'round'
  • 'square'

Default: 'butt'

lineDash

Array

Line dash format - an array of Numbers representing line and gap values (in pixels), for example [5,2,2,2] for a long-short dash pattern

Default: []

lineDashOffset

Number

Line dash offset - distance along the entity's outline at which to start the line dash. Changing this value can be used to create a 'marching ants effect

Default: 0

lineHeight

Number

Multiline text - line height

Default: 1.5

lineJoin

String

Line join styling. Permitted values include:

  • 'miter'
  • 'round'
  • 'bevel'

Default: 'miter'

lineWidth

Number

Line width, in pixels

Default: 1

lockX

Boolean

Positioning flag; set to true to ignore path/pivot/mouse changes along the X axis

Default: false

lockY

Boolean

Positioning flag; set to true to ignore path/pivot/mouse changes along the Y axis

Default: false

maxDimensions

Object private

An object with the following attributes:

  • left - x coordinate of top-left corner of the enclosing box relative to the current cell's top-left corner
  • top - y coordinate of top-left corner of the enclosing box relative to the current cell's top-left corner
  • bottom - x coordinate of bottom-right corner of the enclosing box relative to the current cell's top-left corner
  • left - y coordinate of bottom-right corner of the enclosing box relative to the current cell's top-left corner

Default: null

method

String

Entity drawing method. An entity can be drawn onto a <canvas> element in a variety of ways; these methods include:

  • 'draw' - stroke the entity's path with the entity's strokeStyle color, pattern or gradient
  • 'fill' - fill the entity's path with the entity's fillStyle color, pattern or gradient
  • 'drawFill' - stroke, and then fill, the entity's path; if a shadow offset is present, the shadow is added only to the stroke action
  • 'fillDraw' - fill, and then stroke, the entity's path; if a shadow offset is present, the shadow is added only to the fill action
  • 'floatOver' - stroke, and then fill, the entity's path; shadow offset is added to both actions
  • 'sinkInto' - fill, and then stroke, the entity's path; shadow offset is added to both actions
  • 'clear' - fill the entity's path with transparent color 'rgba(0, 0, 0, 0)'
  • 'clearWithBackground' - fill the entity's path with the Cell's current backgroundColor
  • 'clip' - clip the drawing zone to the entity's path (not tested)
  • 'none' - perform all necessary updates, but do not draw the entity onto the canvas

Note: not all entitys support all of these operations

Default: 'fill'

metrics

String

Font metrics property - any permitted CSS metrics String (eg 'pt', 'px')

Default: 'pt'

miterLimit

Number

miterLimit - affecting the 'pointiness' of the line join where two lines join at an acute angle

Default: 10

mouseIndex

String

Index of mouse vector to use when pivot === 'mouse'

The Pad.mice object can hold details of multiple touch events - when an entity is assigned to a 'mouse', it needs to know which of those mouse trackers to use. Default: mouse (for the mouse cursor vector)

Default: 'mouse'

name

String

Unique identifier for each object; default: computer-generated String based on Object's type

order

Number

Entity order value - lower order entitys are drawn on <canvas> elements before higher order entitys

Default: 0

path

String

(Added by the path extension) The ENTITYNAME of a Shape entity whose path is used to calculate this object's start point

Default: ''

pathPlace

Number

(Added by the path extension) A value between 0 and 1 to represent the distance along a Path object's path, where 0 is the path start and 1 is the path end

Default: 0

pathSpeedConstant

Boolean

(Added by the path extension) A flag to determine whether the object will calculate its position along a Shape path in a regular (true), or simple (false), manner

Default: true

pivot

String

The ENTITYNAME or POINTNAME of a entity or Point object to be used for setting this object's start point

Default: null

radius

Number

Entity radius, in pixels - not supported by all entity objects

Default: 0

roll

Number

Current rotation of the entity, cell or element (in degrees)

Default: 0

scale

Number

The object's scale value - larger values increase the object's size

Default: 1

scaleOutline

Boolean

Scaling flag; set to true to ensure lineWidth scales in line with the scale attribute value

Default: true

shadowBlur

Number

Blur border for a entity's shadow, in pixels

Default: 0

shadowColor

String

Color used for entity shadow effect. Can be:

  • Cascading Style Sheet format color String - '#fff', '#ffffff', 'rgb(255,255,255)', 'rgba(255,255,255,1)', 'white'
  • COLORNAME String

Default: 'rgba(0,0,0,0)'

shadowOffsetX

Number

Horizontal offset of a entity's shadow, in pixels

Default: 0

shadowOffsetY

Number

Vertical offset of a entity's shadow, in pixels

Default: 0

size

Number

Font size

Default: 12

start

Vector

The coordinate Vector representing the object's rotation/flip point

SubScrawl, and all Objects that prototype chain to Subscrawl, supports the following 'virtual' attributes for this attribute:

  • startX - (Number) the x coordinate of the object's rotation/flip point, in pixels, from the left side of the object's cell
  • startY - (Number) the y coordinate of the object's rotation/flip point, in pixels, from the top side of the object's cell

strokeStyle

String

Color, gradient or pattern used to outline a entity. Can be:

  • Cascading Style Sheet format color String - '#fff', '#ffffff', 'rgb(255,255,255)', 'rgba(255,255,255,1)', 'white'
  • COLORNAME String
  • GRADIENTNAME String
  • RADIALGRADIENTNAME String
  • PATTERNNAME String

Default: '#000000'

style

String

Font style property - any permitted CSS style String (eg 'italic')

Default: 'normal'

text

String

Text string to be displayed - for multiline text, insert \n where the text line breaks

Default: ''

textAlign

String

Text alignment for multi-line Phrase entitys. Permitted values include:

  • 'start'
  • 'left'
  • 'center'
  • 'right'
  • 'end'

Default: 'start'

textAlongPath

String

Text along path parameter - when placing text along a path, the text can be positioned in phrase blocks, word blocks or by individual letters. Permitted values: 'phrase', 'word', 'glyph' (for individual letters)

Note: the path module needs to be added to the core to use this functionality

Default: 'phrase'

textBaseline

String

Text baseline value for single-line Phrase entitys set to follow a Path entity path. Permitted values include:

  • 'alphabetic'
  • 'top'
  • 'hanging'
  • 'middle'
  • 'ideographic'
  • 'bottom'

Default: 'alphabetic'

texts

Array private

Array of TEXTNANE strings

Users should never interfere with Text objects, as they are destroyed and recreated after every Phrase.set() and Phrase.setDelta() function call

Default: []

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlPhrase.js:123

Default: 'Phrase'

variant

String

Font variant property - any permitted CSS variant String (eg 'small-caps')

Default: 'normal'

visibility

Boolean

Visibility flag - entitys will (in general) not be drawn on a <canvas> element when this flag is set to false

Default: true

weight

String

Font weight property - any permitted CSS weight String or number (eg 'bold', 700)

Default: 'normal'

width

Number

Entity, cell or element width (in pixels)

Default: 0

winding

String

Shape and Path entity fill method. Can be:

  • 'nonzero' - all areas enclosed by the entity's path are flooded
  • 'evenodd' - only 'odd' areas of the entity's path are flooded

Default: 'nonzero'