g2
Create a 2D graphics command queue object. Call without using ‘new’.
Kind: global typedef
Link: https://github.com/goessner/g2
Author: Stefan Goessner
License: MIT License
Param | Type | Description |
---|---|---|
[opts] | object |
Custom options object. |
Example
const ctx = document.getElementById("c").getContext("2d");
g2() // Create 'g2' instance.
.lin({x1:50,y1:50,x2:100,y2:100}) // Append ...
.lin({x1:100,y1:100,x2:200,y2:50}) // ... commands.
.exe(ctx); // Execute commands addressing canvas context.
g2
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
Clear viewport region.
Kind: instance method of g2
Returns: object
- g2
object
Set the view by placing origin coordinates and scaling factor in device units and make viewport cartesian.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
view arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
[scl] | number |
1 |
absolute scaling factor. |
[x] | number |
0 |
x-origin in device units. |
[y] | number |
0 |
y-origin in device units. |
[cartesian] | boolean |
false |
set cartesian flag. |
object
Draw grid.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
grid arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
[color] | string |
"#ccc" |
change color. |
[size] | number |
20 |
change space between lines. |
object
Draw circle by center and radius.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
circle arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
x | number |
x-value center. | |
y | number |
y-value center. | |
r | number |
radius. | |
w | number |
angle. | |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[sh] | array |
[0,0,0,'transparent'] |
shadow values [x-offset ,y-offset ,blur ,color ], |
Example
g2().cir({x:100,y:80,r:20}) // Draw circle.
object
Draw ellipse by center and radius for x and y.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
ellispe argument object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
x | number |
x-value center. | |
y | number |
y-value center. | |
rx | number |
radius x-axys. | |
ry | number |
radius y-axys. | |
w | number |
start angle. | |
dw | number |
angular range. | |
rot | number |
rotation. | |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
Example
g2().ell({x:100,y:80,rx:20,ry:30,w:0,dw:2*Math.PI/4,rot:1}) // Draw circle.
object
Draw arc by center point, radius, start angle and angular range.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
arc arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
x | number |
x-value center. | |
y | number |
y-value center. | |
r | number |
radius. | |
[w] | number |
0 |
start angle (in radian). |
[dw] | number |
2*pi |
angular range in Radians. |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[lc] | string |
"butt" |
line cap [butt , round , square ]. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
Example
g2().arc({x:300,y:400,r:390,w:-Math.PI/4,dw:-Math.PI/2})
.exe(ctx);
object
Draw rectangle by anchor point and dimensions.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
rectangle arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
x | number |
x-value upper left corner. | |
y | number |
y-value upper left corner. | |
b | number |
width. | |
h | number |
height. | |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[lj] | string |
"'miter'" |
line join [round , bevel , miter ]. |
[ml] | number |
10 |
miter limit. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
Example
g2().rec({x:100,y:80,b:40,h:30}) // Draw rectangle.
object
Draw line by start point and end point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
line arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
x1 | number |
start x coordinate. | |
y1 | number |
start y coordinate. | |
x2 | number |
end x coordinate. | |
y2 | number |
end y coordinate. | |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[lc] | string |
"butt" |
line cap [butt , round , square ]. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
Example
g2().lin({x1:10,x2:10,y1:190,y2:10}) // Draw line.
object
Draw polygon by points. Using iterator function for getting points from array by index. It must return current point object {x,y} or object {done:true}. Default iterator expects sequence of x/y-coordinates as a flat array [x,y,…], array of [[x,y],…] arrays or array of [{x,y},…] objects.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
polygon arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
pts | array |
array of points. | |
[format] | string |
format string of points array structure. Useful for handing over initial empty points array. One of ['x,y','[x,y]','{x,y}'] . Has precedence over pts content. |
|
[closed] | boolean |
false |
|
x | number |
start x coordinate. | |
y | number |
start y coordinate. | |
w | number |
angle. | |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[lc] | string |
"butt" |
line cap [butt , round , square ]. |
[lj] | string |
"'miter'" |
line join [round , bevel , miter ]. |
[ml] | number |
10 |
miter limit. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
Example
g2().ply({pts:[100,50,120,60,80,70]}),
.ply({pts:[150,60],[170,70],[130,80]],closed:true}),
.ply({pts:[{x:160,y:70},{x:180,y:80},{x:140,y:90}]}),
.exe(ctx);
object
Draw text string at anchor point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
text arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
str | string |
text string. | |
[x] | number |
0 |
x coordinate of text anchor position. |
[y] | number |
0 |
y coordinate of text anchor position. |
[w] | number |
0 |
w Rotation angle about anchor point with respect to positive x-axis. |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
[thal] | string |
"'start'" |
- Text horizontal alignment ['start' ,'end' ,'left' ,'right' ,'center' ] |
[tval] | string |
"'alphabetic'" |
- Text vertival alignment ['top' ,'hanging' ,'middle' ,'alphabetic' ,'ideographic' ,'bottom' ] |
[font] | string |
"'normal 14px serif'" |
Font styling |
object
Reference g2 graphics commands from another g2 object or a predefined g2.symbol. With this command you can reuse instances of grouped graphics commands while applying a similarity transformation and style properties on them. In fact you might want to build custom graphics libraries on top of that feature.
Kind: instance method of g2
Returns: object
- g2
See: predefined symbols in g2.ext
Type | Description |
---|---|
object |
use arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
grp | object | string |
g2 source object or symbol name found in ‘g2.symbol’ namespace. | |
[x] | number |
0 |
translation value x. |
[y] | number |
0 |
translation value y. |
[w] | number |
0 |
rotation angle (in radians). |
[scl] | number |
1 |
scale factor. |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[lc] | string |
"butt" |
line cap [butt , round , square ]. |
[lj] | string |
"'miter'" |
line join [round , bevel , miter ]. |
[ml] | number |
10 |
miter limit. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
[thal] | string |
"'start'" |
- Text horizontal alignment ['start' ,'end' ,'left' ,'right' ,'center' ] |
[tval] | string |
"'alphabetic'" |
- Text vertival alignment ['top' ,'hanging' ,'middle' ,'alphabetic' ,'ideographic' ,'bottom' ] |
[font] | string |
"'normal 14px serif'" |
Font styling |
Example
g2.symbol.cross = g2().lin({x1:5,y1:5,x2:-5,y2:-5}).lin({x1:5,y1:-5,x2:-5,y2:5}); // Define symbol.
g2().use({grp:"cross",x:100,y:100}) // Draw cross at position 100,100.
object
Draw image. This also applies to images of reused g2 objects. If an image can not be loaded, it will be replaced by a broken-image symbol.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
image arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
uri | string |
image uri or data:url. | |
[x] | number |
0 |
x-coordinate of image (upper left). |
[y] | number |
0 |
y-coordinate of image (upper left). |
[b] | number |
image.width |
width. |
[h] | number |
image.height |
height. |
[sx] | number |
0 |
source x-offset. |
[sy] | number |
0 |
source y-offset. |
[sb] | number |
image.width |
source width. |
[sh] | number |
image.height |
source height. |
[xoff] | number |
0 |
x-offset. |
[yoff] | number |
0 |
y-offset. |
[w] | number |
0 |
rotation angle (about upper left, in radians). |
[scl] | number |
1 |
image scaling. |
object
Begin subcommands. Current state is saved. Optionally apply transformation or style properties.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
beg arguments object. |
Properties
Name | Type | Default | Description |
---|---|---|---|
[x] | number |
0 |
translation value x. |
[y] | number |
0 |
translation value y. |
[w] | number |
0 |
rotation angle (in radians). |
[scl] | number |
1 |
scale factor. |
[matrix] | array |
matrix instead of single transform arguments (SVG-structure [a,b,c,d,x,y]). | |
[fs] | string |
"transparent" |
fill color. |
[ls] | string |
"black" |
stroke color. |
[lw] | string |
1 |
line width. |
[lc] | string |
"butt" |
line cap [butt , round , square ]. |
[lj] | string |
"'miter'" |
line join [round , bevel , miter ]. |
[ml] | number |
10 |
miter limit. |
[ld] | array |
[] |
line dash array. |
[sh] | array |
[0,0,0,"transparent"] |
shadow values [x-offset ,y-offset ,blur ,color ], |
[thal] | string |
"'start'" |
- text horizontal alignment ['start' ,'end' ,'left' ,'right' ,'center' ] |
[tval] | string |
"'alphabetic'" |
- text vertival alignment ['top' ,'hanging' ,'middle' ,'alphabetic' ,'ideographic' ,'bottom' ] |
[font] | string |
"'normal 14px serif'" |
Font styling |
object
End subcommands. Previous state is restored.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
end arguments object. |
object
Begin new path.
Kind: instance method of g2
Returns: object
- g2
object
Close current path by straight line.
Kind: instance method of g2
Returns: object
- g2
object
Move to point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
move arguments object. |
Properties
Name | Type | Description |
---|---|---|
x | number |
move to x coordinate |
y | number |
move to y coordinate |
object
Create line segment to point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
line segment argument object. |
Properties
Name | Type | Description |
---|---|---|
x | number |
x coordinate of target point. |
y | number |
y coordinate of target point. |
Example
g2().p() // Begin path.
.m({x:0,y:50}) // Move to point.
.l({x:300,y:0}) // Line segment to point.
.l({x:400,y:100}) // ...
.stroke() // Stroke path.
object
Create quadratic bezier curve segment to point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
quadratic curve arguments object. |
Properties
Name | Type | Description |
---|---|---|
x1 | number |
x coordinate of control point. |
y1 | number |
y coordinate of control point. |
x | number |
x coordinate of target point. |
y | number |
y coordinate of target point. |
Example
g2().p() // Begin path.
.m({x:0,y:0}) // Move to point.
.q({x1:200,y1:200,x:400,y:0}) // Quadratic bezier curve segment.
.stroke() // Stroke path.
object
Create cubic bezier curve to point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
cubic curve arguments object. |
Properties
Name | Type | Description |
---|---|---|
x1 | number |
x coordinate of first control point. |
y1 | number |
y coordinate of first control point. |
x2 | number |
x coordinate of second control point. |
y2 | number |
y coordinate of second control point. |
x | number |
x coordinate of target point. |
y | number |
y coordinate of target point. |
Example
g2().p() // Begin path.
.m({x:0,y:100}) // Move to point.
.c({x1:100,y1:200,x2:200,y2:0,x:400,y:100}) // Create cubic bezier curve.
.stroke() // Stroke path.
.exe(ctx); // Render to canvas context.
object
Draw arc with angular range to target point.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
arc arguments object. |
Properties
Name | Type | Description |
---|---|---|
dw | number |
angular range in radians. |
x | number |
x coordinate of target point. |
y | number |
y coordinate of target point. |
Example
g2().p() // Begin path.
.m({x:50,y:50}) // Move to point.
.a({dw:2,x:300,y:100}) // Create arc segment.
.stroke() // Stroke path.
.exe(ctx); // Render to canvas context.
object
Stroke the current path or path object.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
stroke arguments object. |
Properties
Name | Type | Description |
---|---|---|
[d] | string |
SVG path definition string. Current path is ignored then. |
object
Fill the current path or path object.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
fill arguments object. |
Properties
Name | Type | Description |
---|---|---|
[d] | string |
SVG path definition string. Current path is ignored then. |
object
Shortcut for stroke and fill the current path or path object. In case of shadow style, only the path interior creates shadow, not also the path contour.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
object |
drw arguments object. |
Properties
Name | Type | Description |
---|---|---|
[d] | string |
SVG path definition string. Current path is ignored then. |
object
Delete all commands beginning from idx
to end of command queue.
Kind: instance method of g2
Returns: object
- g2
object
Call function between commands of the command queue.
Kind: instance method of g2
Returns: object
- g2
Type | Description |
---|---|
function |
ins argument function. |
Example
const node = {
fill:'lime',
g2() { return g2().cir({x:160,y:50,r:15,fs:this.fill,lw:4,sh:[8,8,8,"gray"]}) }
};
let color = 'red';
g2().cir({x:40,y:50,r:15,fs:color,lw:4,sh:[8,8,8,"gray"]}) // draw red circle.
.ins(()=>{color='green'}) // color is now green.
.cir({x:80,y:50,r:15,fs:color,lw:4,sh:[8,8,8,"gray"]}) // draw green circle.
.ins((g) => // draw orange circle
g.cir({x:120, y:50, r:15, fs:'orange', lw:4,sh:[8,8,8,"gray"]}))
.ins(node) // draw node.
.exe(ctx) // render to canvas context.
object
Execute g2 commands. It does so automatically and recursively with ‘use’ed commands.
Kind: instance method of g2
Returns: object
- g2
Param | Type | Description |
---|---|---|
ctx | object |
Context. |