context2d

This plugin mimics the HTML5 CanvasRenderingContext2D.

The goal is to provide a way for current canvas implementations to print directly to a PDF.

Source:

Members

(inner) autoPaging :boolean

Source:
Default Value:
  • true
Type:
  • boolean

(inner) ctx :object

Source:
Default Value:
  • {}
Type:
  • object

(inner) ctxStack :array

Source:
Default Value:
  • []
Type:
  • array

(inner) fillStyle

Source:
Default Value:
  • #000000
Properties:
Name Type Description
value color | gradient | pattern

The color of the drawing. Default value is #000000
A gradient object (linear or radial) used to fill the drawing (not supported by context2d)
A pattern object to use to fill the drawing (not supported by context2d)

Sets or returns the color, gradient, or pattern used to fill the drawing

(inner) lastBreak :number

Source:
Default Value:
  • 0
Type:
  • number

(inner) lineCap

Source:
Default Value:
  • butt
Properties:
Name Type Description
lineCap butt | round | square

butt A flat edge is added to each end of the line
round A rounded end cap is added to each end of the line
square A square end cap is added to each end of the line

Sets or returns the style of the end caps for a line

(inner) lineWidth

Source:
Default Value:
  • 1
Properties:
Name Type Description
lineWidth number

The current line width, in pixels

Sets or returns the current line width

(inner) miterLimit

Source:
Default Value:
  • 10

A number specifying the miter limit ratio in coordinate space units. Zero, negative, Infinity, and NaN values are ignored. The default value is 10.0.

(inner) pageBreaks :number

Source:
Default Value:
  • 0

Y Position of page breaks.

Type:
  • number

(inner) pageWrapXEnabled :boolean

Source:
Default Value:
  • false
Type:
  • boolean

(inner) pageWrapYEnabled :boolean

Source:
Default Value:
  • true
Type:
  • boolean

(inner) path :array

Source:
Default Value:
  • []
Type:
  • array

(inner) posX :number

Source:
Default Value:
  • 0
Type:
  • number

(inner) posY :number

Source:
Default Value:
  • 0
Type:
  • number

(inner) strokeStyle

Source:
Default Value:
  • #000000
Properties:
Name Type Description
color color

A CSS color value that indicates the stroke color of the drawing. Default value is #000000 (not supported by context2d)
gradient gradient

A gradient object (linear or radial) used to create a gradient stroke (not supported by context2d)
pattern pattern

A pattern object used to create a pattern stroke (not supported by context2d)

Sets or returns the color, gradient, or pattern used for strokes

Methods

(inner) arc(x, y, radius, startAngle, endAngle, counterclockwise)

Source:

The arc() method creates an arc/curve (used to create circles, or parts of circles).

Parameters:
Name Type Description
x Number

The x-coordinate of the center of the circle
y Number

The y-coordinate of the center of the circle
radius Number

The radius of the circle
startAngle Number

The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
endAngle Number

The ending angle, in radians
counterclockwise Boolean

Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

(inner) arcTo(x1, y1, x2, y2, radius)

Source:

The arcTo() method creates an arc/curve between two tangents on the canvas.

Parameters:
Name Type Description
x1 Number

The x-coordinate of the first tangent
y1 Number

The y-coordinate of the first tangent
x2 Number

The x-coordinate of the second tangent
y2 Number

The y-coordinate of the second tangent
radius

The radius of the arc

(inner) beginPath()

Source:

The beginPath() method begins a path, or resets the current path.

(inner) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Source:

The bezierCurveTo() method adds a point to the current path by using the specified control points that represent a cubic Bézier curve.

A cubic bezier curve requires three points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point.

Parameters:
Name Type Description
cp1x Number

The x-coordinate of the first Bézier control point
cp1y Number

The y-coordinate of the first Bézier control point
cp2x Number

The x-coordinate of the second Bézier control point
cp2y Number

The y-coordinate of the second Bézier control point
x Number

The x-coordinate of the ending point
y Number

The y-coordinate of the ending point

(inner) clearRect(x, y, w, h)

Source:

We cannot clear PDF commands that were already written to PDF, so we use white instead.
As a special case, read a special flag (ignoreClearRect) and do nothing if it is set. This results in all calls to clearRect() to do nothing, and keep the canvas transparent. This flag is stored in the save/restore context and is managed the same way as other drawing states.

Parameters:
Name Type Description
x Number

The x-coordinate of the upper-left corner of the rectangle
y Number

The y-coordinate of the upper-left corner of the rectangle
w Number

The width of the rectangle to clear, in pixels
h Number

The height of the rectangle to clear, in pixels

(inner) clip()

Source:

The clip() method clips a region of any shape and size from the original canvas.

(inner) closePath()

Source:

The closePath() method creates a path from the current point back to the starting point.

(inner) createArc()

Source:

Return a array of objects that represent bezier curves which approximate the circular arc centered at the origin, from startAngle to endAngle (radians) with the specified radius.

Each bezier curve is an object with four points, where x1,y1 and x4,y4 are the arc's end points and x2,y2 and x3,y3 are the cubic bezier's control points.

(inner) fillRect(x, y, w, h)

Source:

The fillRect() method draws a "filled" rectangle. The default color of the fill is black.

Parameters:
Name Type Description
x Number

The x-coordinate of the upper-left corner of the rectangle
y Number

The y-coordinate of the upper-left corner of the rectangle
w Number

The width of the rectangle, in pixels
h Number

The height of the rectangle, in pixels

(inner) fillText(text, x, y, maxWidth)

Source:

The fillText() method draws filled text on the canvas. The default color of the text is black.

Parameters:
Name Type Description
text String

Specifies the text that will be written on the canvas
x Number

The x coordinate where to start painting the text (relative to the canvas)
y Number

The y coordinate where to start painting the text (relative to the canvas)
maxWidth Number

Optional. The maximum allowed width of the text, in pixels

(inner) lineTo(x, y)

Source:

The lineTo() method adds a new point and creates a line TO that point FROM the last specified point in the canvas (this method does not draw the line).

Parameters:
Name Type Description
x

The x-coordinate of where to create the line to
y

The y-coordinate of where to create the line to

(inner) measureText(text) → {Number}

Source:

The measureText() method returns an object that contains the width of the specified text, in pixels.

Parameters:
Name Type Description
text String

The text to be measured
Returns:
Type
Number

(inner) moveTo(x, y)

Source:

Moves the path to the specified point in the canvas, without creating a line

Parameters:
Name Type Description
x Number

The x-coordinate of where to move the path to
y Number

The y-coordinate of where to move the path to

(inner) quadraticCurveTo(cpx, cpy, x, y)

Source:

The quadraticCurveTo() method adds a point to the current path by using the specified control points that represent a quadratic Bézier curve.

A quadratic Bézier curve requires two points. The first point is a control point that is used in the quadratic Bézier calculation and the second point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point.

Parameters:
Name Type Description
cpx Number

The x-coordinate of the Bézier control point
cpy Number

The y-coordinate of the Bézier control point
x Number

The x-coordinate of the ending point
y Number

The y-coordinate of the ending point

(inner) rect(x, y, w, h)

Source:

The rect() method creates a rectangle.

Parameters:
Name Type Description
x Number

The x-coordinate of the upper-left corner of the rectangle
y Number

The y-coordinate of the upper-left corner of the rectangle
w Number

The width of the rectangle, in pixels
h Number

The height of the rectangle, in pixels

(inner) restore()

Source:

Returns previously saved path state and attributes

(inner) rotate(angle)

Source:

To calculate from degrees to radians: degreesMath.PI/180.
Example: to rotate 5 degrees, specify the following: 5Math.PI/180

Parameters:
Name Type Description
angle Number

The rotation angle, in radians.

(inner) save()

Source:

Saves the state of the current context

(inner) scale(scalewidth, scaleheight)

Source:

The scale() method scales the current drawing, bigger or smaller.

Parameters:
Name Type Description
scalewidth Number

Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)
scaleheight Number

Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)

(inner) setTransform(a, b, c, d, e, f)

Source:

Each object on the canvas has a current transformation matrix.

The setTransform() method resets the current transform to the identity matrix, and then runs transform() with the same arguments.

In other words, the setTransform() method lets you scale, rotate, move, and skew the current context.

Parameters:
Name Type Description
a Number

Horizontal scaling
b Number

Horizontal skewing
c Number

Vertical skewing
d Number

Vertical scaling
e Number

Horizontal moving
f Number

Vertical moving

(inner) stroke()

Source:

The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods. The default color is black.

(inner) strokeRect(x, y, w, h)

Source:

The strokeRect() method draws a rectangle (no fill). The default color of the stroke is black.

Parameters:
Name Type Description
x Number

The x-coordinate of the upper-left corner of the rectangle
y Number

The y-coordinate of the upper-left corner of the rectangle
w Number

The width of the rectangle, in pixels
h Number

The height of the rectangle, in pixels

(inner) strokeText(text, x, y, maxWidth)

Source:

The strokeText() method draws text (with no fill) on the canvas. The default color of the text is black.

Parameters:
Name Type Description
text String

Specifies the text that will be written on the canvas
x Number

The x coordinate where to start painting the text (relative to the canvas)
y Number

The y coordinate where to start painting the text (relative to the canvas)
maxWidth Number

Optional. The maximum allowed width of the text, in pixels

(inner) toDataURL()

Source:

(inner) transform(a, b, c, d, e, f)

Source:

Each object on the canvas has a current transformation matrix.

The transform() method replaces the current transformation matrix. It multiplies the current transformation matrix with the matrix described by:



a c e

b d f

0 0 1

In other words, the transform() method lets you scale, rotate, move, and skew the current context.

Parameters:
Name Type Description
a Number

Horizontal scaling
b Number

Horizontal skewing
c Number

Vertical skewing
d Number

Vertical scaling
e Number

Horizontal moving
f Number

Vertical moving

(inner) translate(x, y)

Source:

The translate() method remaps the (0,0) position on the canvas.

Parameters:
Name Type Description
x Number

The value to add to horizontal (x) coordinates
y Number

The value to add to vertical (y) coordinates