g2

g2 ⇒ 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 ⇒ g2
  • .clr() ⇒ object
  • .view() ⇒ object
  • .grid() ⇒ object
  • .cir() ⇒ object
  • .ell() ⇒ object
  • .arc() ⇒ object
  • .rec() ⇒ object
  • .lin() ⇒ object
  • .ply() ⇒ object
  • .txt() ⇒ object
  • .use() ⇒ object
  • .img() ⇒ object
  • .beg() ⇒ object
  • .end() ⇒ object
  • .p() ⇒ object
  • .z() ⇒ object
  • .m() ⇒ object
  • .l() ⇒ object
  • .q() ⇒ object
  • .c() ⇒ object
  • .a() ⇒ object
  • .stroke() ⇒ object
  • .fill() ⇒ object
  • .drw() ⇒ object
  • .del() ⇒ object
  • .ins() ⇒ object
  • .exe(ctx) ⇒ object

g2.clr() ⇒ object

Clear viewport region.

Kind: instance method of g2
Returns: object - g2

g2.view() ⇒ 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.

g2.grid() ⇒ 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.

g2.cir() ⇒ 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.

g2.ell() ⇒ 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.

g2.arc() ⇒ 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);

g2.rec() ⇒ 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.

g2.lin() ⇒ 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.

g2.ply() ⇒ 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);

g2.txt() ⇒ 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

g2.use() ⇒ 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.

g2.img() ⇒ 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.

g2.beg() ⇒ 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

g2.end() ⇒ object

End subcommands. Previous state is restored.

Kind: instance method of g2
Returns: object - g2

Type	Description
object	end arguments object.

g2.p() ⇒ object

Begin new path.

Kind: instance method of g2
Returns: object - g2

g2.z() ⇒ object

Close current path by straight line.

Kind: instance method of g2
Returns: object - g2

g2.m() ⇒ 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

g2.l() ⇒ 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.

g2.q() ⇒ 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.

g2.c() ⇒ 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.

g2.a() ⇒ 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.

g2.stroke() ⇒ 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.

g2.fill() ⇒ 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.

g2.drw() ⇒ 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.

g2.del() ⇒ object

Delete all commands beginning from idx to end of command queue.

Kind: instance method of g2
Returns: object - g2

g2.ins() ⇒ 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.

g2.exe(ctx) ⇒ 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.

This site is open source. Improve this page.