Canvas Drawing Module Reference

Related documents

• MVCS index

Table of contents

• Introduction
  • ctxDraw
• ctxDraw methods
  • ctxDraw.arrow()
  • ctxDraw.createPatternFromFn()
  • ctxDraw.dottedLineTo()
  • ctxDraw.imageCache()
  • ctxDraw.json()
  • ctxDraw.text()
  • ctxDraw.textWidth()

Introduction

The Canvas drawing module contains the ctxDraw object that cointain methods for drawing on a 2D Canvas drawing context.

ctxDraw

Syntax

import {ctxDraw} from 'common/option/ctxDraw.js';

The ctxDraw object contains methods used to draw in a 2D Canvas drawing context.

ctxDraw methods

ctxDraw.arrow()

Syntax

ctxDraw.arrow(ctx, startX, startY, angle, length, width)

Draw an arrow from (startX, startY) at angle radians (from the right), length long, with an arrowhead width wide. The current line width and color will be used.

Parameters

• ctx
  A 2D Canvas context.
• startX
  The X position in pixels to start the tail of the arrow.
• startY
  The Y position in pixels to start the tail of the arrow.
• angle
  The angle, in radian, clockwise from the horizontal starting at (startX, startY).
• length
  The length from the tail to the head, in pixels.
• length
  The width of the arrowhead, in pixels.

ctxDraw.createPatternFromFn()

Syntax

ctxDraw.createPatternFromFn(width, height, fn)
ctxDraw.createPatternFromFn(width, height, fn, repeat)

Returns a pattern that is populated by fn. The method creates a new 2D drawing canvas of the required width and height, passes it to fn to draw the pattern in, and then calls the context's createPattern method with the new context as the first argument and repeat as the second.

Parameters

• width
  The width of the created pattern in pixels.
• height
  The height of the created pattern in pixels.
• fn
  A function to populate the image. The function takes a new drawing context with the specified width and height, and should use it to draw the pattern.
• repeat (optional)
  The repetition argument to be passed to createPattern. If omitted, 'repeat' is used.

Return value

The pattern that was returned by the createPattern() method.

ctxDraw.dottedLineTo()

Syntax

ctxDraw.dottedLineTo(ctx, startX, startY, endX, endY)
ctxDraw.dottedLineTo(ctx, startX, startY, endX, endY, dot)
ctxDraw.dottedLineTo(ctx, startX, startY, endX, endY, dot, space)

Draw a dotted or dashed line from (startX, startY) to (endX, endY). If dot is specified, dots are dot px long. If dot is omitted, the current context lineWidth is used. If space is specified, dots have space px of space between them. If space is omitted, dots have dot px of space between them. The current line width and color are used to draw the dotted line.

Parameters

• ctx
  A 2D Canvas context.
• startX
  The X position in pixels to start the dotted line.
• startY
  The Y position in pixels to start the dotted line.
• endX
  The X position in pixels to end the dotted line.
• endY
  The Y position in pixels to end the dotted line.
• dot (optional)
  If dot is specified, the dots are dot pixels long. If dot is omitted, the current context lineWidth is used.
• space (optional)
  If space is specified, dots have space pixels of space between them. If space is omitted, dots have dot pixels of space between them.

ctxDraw.imageCache()

Syntax

ctxDraw.imageCache(url)

Return a cached image associated with url. If there is no cached Image object associated with url, then a new Image object is created using the url, and the fetched result is saved.

Parameters

• url
  A URL for the image.

ctxDraw.json()

Syntax

ctxDraw.json(ctx, info)

Draw objects in ctx from the info array. Each array element is an object. An object may contain the following special properties:

• line
  The property value is an array of points, each of which is a 2-element array of [x, y] points. A line is stroked between the points.
• text
  The property value is the text to be filled. A pos property is an optional [x, y] for the placement, and a rot property is an optional clockwise text rotation angle in degrees.
• image:
  The property value is a URL for the image. A pos property is an optional [x, y] for the placement, and size is an optional [width, height].

Objects with other keys are assumed to be properties in the context, and those context properties are set from the key values. For example:

ctxDraw.json(ctx, [{lineWidth:3}, {line:[[10,10],[20,20]]}])

draws a 3 pixel wide line from (10,10) to (20,20).

Parameters

• ctx
  A 2D Canvas context.
• desc
  An array of objects. Each object contains a context property value to be set or an object with line, text or image properties as described above.

ctxDraw.text()

Syntax

ctxDraw.text(ctx, startX, startY, text, lineHeight)

Draw a text starting at (startX, startY) and going right and down. A \n in text signals a new line. lineHeight is the distance between lines. [c color]text[/c] in the string will draw that text in the specified color.

Parameters

• ctx
  A 2D Canvas context.
• startX
  The X position in pixels for the lefthand side of the text.
• startY
  The Y position in pixels for the baseline of the first line text.
• text
  The text to render.
• lineHeight
  The pitch between text lines.

ctxDraw.textWidth()

Syntax

ctxDraw.textWidth(text, fontProp)

Return the rendered width of text. fontProp is a CSS string speicifying the font and font attributes to be used.

Parameters

• text
  The text to be measured.
• fontProp
  A CSS string used to set the style.font property for the text.

Return value

The rendered width of the text in pixels