docs/module-context2d.html
This plugin mimics the HTML5 CanvasRenderingContext2D.
The goal is to provide a way for current canvas implementations to print directly to a PDF.
Source:
Source:
Default Value:
Source:
Default Value:
Source:
Default Value:
| Name | Type | Description |
|---|---|---|
value | color | gradient |
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
Source:
Default Value:
Source:
Default Value:
| Name | Type | Description |
|---|---|---|
lineCap | butt | round |
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
Source:
Default Value:
A float specifying the amount of the line dash offset. The default value is 0.0.
Source:
Default Value:
| Name | Type | Description |
|---|---|---|
lineWidth | number |
The current line width, in pixels
|
Sets or returns the current line width
Source:
Default Value:
Gets or sets the page margin when using auto paging. Has no effect when autoPaging is off.
Source:
Default Value:
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.
Source:
Default Value:
Y Position of page breaks.
Source:
Default Value:
Source:
Default Value:
Source:
Default Value:
Source:
Default Value:
Source:
Default Value:
Source:
Default Value:
| 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
Source:
The arc() method creates an arc/curve (used to create circles, or parts of circles).
| 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.
|
Source:
The arcTo() method creates an arc/curve between two tangents on the canvas.
| 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
|
Source:
The beginPath() method begins a path, or resets the current path.
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.
| 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
|
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.
| 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
|
Source:
The clip() method clips a region of any shape and size from the original canvas.
Source:
The closePath() method creates a path from the current point back to the starting point.
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.
Source:
The fillRect() method draws a "filled" rectangle. The default color of the fill is black.
| 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
|
Source:
The fillText() method draws filled text on the canvas. The default color of the text is black.
| 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
|
Source:
gets the current line dash pattern.
An Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number, when setting the elements, is odd, the elements of the array get copied and concatenated. For example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25].
Type Array
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).
| 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
|
Source:
The measureText() method returns an object that contains the width of the specified text, in pixels.
| Name | Type | Description |
|---|---|---|
text | String |
The text to be measured
|
Type Number
Source:
Moves the path to the specified point in the canvas, without creating a line
| 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
|
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.
| 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
|
Source:
The rect() method creates a rectangle.
| 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
|
Source:
Returns previously saved path state and attributes
Source:
To calculate from degrees to radians: degrees_Math.PI/180.
Example: to rotate 5 degrees, specify the following: 5_Math.PI/180
| Name | Type | Description |
|---|---|---|
angle | Number |
The rotation angle, in radians.
|
Source:
Saves the state of the current context
Source:
The scale() method scales the current drawing, bigger or smaller.
| 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.)
|
Source:
It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
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.
| 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
|
Source:
The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods. The default color is black.
Source:
The strokeRect() method draws a rectangle (no fill). The default color of the stroke is black.
| 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
|
Source:
The strokeText() method draws text (with no fill) on the canvas. The default color of the text is black.
| 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
|
Source:
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.
| 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
|
Source:
The translate() method remaps the (0,0) position on the canvas.
| Name | Type | Description |
|---|---|---|
x | Number |
The value to add to horizontal (x) coordinates
|
| y | Number |
The value to add to vertical (y) coordinates
|