VNJS Standard Library

Standard Objects

• Rectangle
• TextTrail
• LinearGradient
• RadialGradient

A canvas element that draws a rectangle on the screen. The rectangle can have rounded corners.

Constructor Properties:

• width: Defines the width of the rectangle in pixels.
• height: Defines the height of the rectangle in pixels.
• fill_style: The fill style of the interior of the rectangle. This value must be either a color definition string (eg. 'hsl(210, 70%, 50%)') or a LinearGradient or RadialGradient object. If not defined then the interior is not filled.
• stroke_style: The stroke style for drawing the edge of the rectangle. This value must be either a color definition string (eg. 'hsl(210, 90%, 1%)') or a LinearGradient or RadialGradient object. If not defined then no edge is drawn.
• line_width: The width of the line stroke in pixels.
• corner_radius: If the rectangle has rounded corners, this value defines the radius of the curved corners. If not defined then the corners are not rounded.

Examples

A rectangle with a 50% transparent fill, a black edge, and rounded corners;

const my_rectangle = Rectangle(
    width:         400,
    height:        150,
    corner_radius: 75,
    fill_style:    'hsla(211, 70%, 10%, .5)',
    stroke_style:  'black',
    line_width:    1.5,
  );

A rectangle with a linear gradient fill;

const my_linear_gradient = LinearGradient(
    x1: 0, y1: -200,
    x2: 0, y2: +200,
  );
my_linear_gradient.addColorStop(stop:0, color:'hsla(211, 40%, 10%, 0)');
my_linear_gradient.addColorStop(stop:1, color:'hsla(211, 40%,  1%, 1)');

const my_rectangle = Rectangle(
    width:         400,
    height:        400,
    corner_radius: 75,
    fill_style:    my_linear_gradient,
  );

A canvas element that draws and animates a Text Trail on the screen. A Text Trail is an area in which a string of text is measured and formatted to fit within the area. The text may contain basic HTML markup to change font weight, color and font style. This canvas element supports an animation sequence that renders the text word by word.

Constructor Properties:

• font_family: Default font family of the text in this text trail. For fallback fonts then separate each font name with a comma. For example; 'Helvetica, Arial, sans-serif'
• font_size: Default font size as a string. For example; '25px'
• font_color: Default font color as a color definition string. For example; '#4080af'
• width: The total width of the text trail in pixels.
• height: The total height of the text trail in pixels.
• trail_width: The width of the area wherein the text is drawn. This is different than width and height because a margin is necessary when large text glyphs are drawn.
• trail_height: The height of the area wherein the text is drawn.
• dx: Offset to draw text.
• dy: Offset to draw text.
• draw_text_shadow: (boolean) When true draws a shadow around the text.
• ms_per_word: The standard time it should take to draw a word, in milliseconds.
• pixels_between_words: The number of pixels that separate words.
• text_halign: (string) The horizontal alignment of text. Either, 'left', 'center' or 'right'.
• line_height: The number of pixels that separate lines.
• first_line_indent: The x offset, in pixels, for the first line.

Examples

A styling object for a linear gradient.

Constructor Properties:

• x1, y1: The relative coordinates of the start of the gradient.
• x2, y2: The relative coordinates of the end of the gradient.

Mutator Functions:

• addColorStop ( stop, color ): Adds a color stop for describing how the gradient color interpolates over the range. (eg. lg.addColorStop( stop: 0, color:'hsla(211, 40%, 10%, .2' ))

Examples

A styling object for a radial gradient.

Constructor Properties:

• x1, y1: The relative coordinates of the start of the gradient.
• r1: The radius of the start of the gradient.
• x2, y2: The relative coordinates of the end of the gradient.
• r2: The radius of the end of the gradient.

Mutator Functions:

• addColorStop ( stop, color ): Adds a color stop for describing how the gradient color interpolates over the range. (eg. lg.addColorStop( stop: 0, color:'hsla(211, 40%, 10%, .2' ))

Examples