API Docs for: 6.0.1
Show:

Context Class

Extends Base
Module: scrawlCore

Context

Instantiation

  • This object should never be instantiated by users

Purpose

  • wraps a given context for a Cell or Entity object
  • responsible for comparing contexts and listing changes that need to be made for successful Entity stamping on a canvas
  • all updates to a Context object's attributes should be performed via the Entity object's set() function

Constructor

Context

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

clone

(
  • items
)
chainable

Clone a Scrawl.js object, optionally altering attribute values in the cloned object

Note that any callback or fn attribute functions will be referenced by the clone, not copied to the clone; these can be overwritten with new anonymous functions by including them in the items argument object

(This function is replaced by the path extension)

Parameters:

  • items Object

    Object containing attribute key:value pairs; will overwrite existing values in the cloned, but not the source, Object

Returns:

Cloned object

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
var newBox = box.clone({
    height: 100
    });
newBox.get('width');        //returns 50
newBox.get('height');       //returns 100

get

(
  • item
)

Retrieve an attribute value. If the attribute value has not been set, then the default value for that attribute will be returned.

Parameters:

  • item String

    Attribute key

Returns:

Attribute value

Example:

var box = scrawl.makeBlock({
    width: 50,
    });
box.get('width');               //returns 50
box.get('height');              //returns 0
box.get('favouriteAnimal');     //returns undefined

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

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

set

(
  • items
)
chainable

Set attribute values. Multiple attributes can be set in the one call by including the attribute key:value pair in the argument object.

An attribute value will only be set if the object already has a default value for that attribute. This restricts the ability of coders to add attributes to Scrawl objects.

Parameters:

  • items Object

    Object containing attribute key:value pairs

Returns:

This

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
box.set({
    height: 100,
    favouriteAnimal: 'cat'
    });
box.get('width');               //returns 50
box.get('height');              //returns 100
box.get('favouriteAnimal');     //returns undefined

setDelta

(
  • items
)
private chainable

Adds the value of each attribute supplied in the argument to existing values; only Number attributes can be amended using this function - lineDashOffset, lineWidth, globalAlpha

(Only for use by Context objects)

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

Properties

comment

String

Comment, for accessibility

Default: ''

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'

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'

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

lineJoin

String

Line join styling. Permitted values include:

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

Default: 'miter'

lineWidth

Number

Line width, in pixels

Default: 1

miterLimit

Number

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

Default: 10

name

String

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

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

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'

textAlign

String

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

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

Default: 'start'

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'

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

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

Default: 'Context'

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'