@goessner/g2
v2.2.2
Published
g2 - a tiny 2d graphics command library
Downloads
2
Maintainers
Readme
g2
g2 is a 2D graphics javascript library based on the command pattern principle. Its main goal is to provide a simple API for users who want to generate 2D web graphics occasionally. So the API is minimal and easy to understand. The library is tiny, fast and renderer agnostic.
Main features
- Fast and lightweight graphics command queue builder.
- Adressing HTML canvas 2D context as the default renderer.
- Generating SVG output using an addon library.
- Method chaining.
- Support of cartesian coordinates.
- Viewport pan and zoom transformations.
- Low level path commands with short names adopted from SVG.
- Higher level element commands.
- Maintaining a state stack for styling and transformations.
- Easy way to build custom symbol libraries.
- Tiny footprint by 5kB compressed (gzip).
- No dependency.
Minimal Example
<canvas id="c" width="200", height="100"></canvas>
<script src="g2.js"></script>
<script>
g2().rec(40,30,120,40,{ls:"green",fs:"orange",lw:3}) // create g2 object and add rectangle with style.
.exe(document.getElementById("c").getContext("2d")); // draw to canvas.
</script>
Documentation
API Reference
See the API Reference for details.
GitCDN
Use the link https://gitcdn.xyz/repo/goessner/g2/master/g2.min.js for getting the latest commit as a raw file.
In HTML use ...
<script src="https://gitcdn.xyz/repo/goessner/g2/master/g2.min.js"></script>
Cheat Sheet
Check out the single page Cheat Sheet.
License
g2 is licensed under the terms of the MIT License.
#Change Log
2.2.0 - 2016-06-20
Added
g2.spline
performing 'centripetal Catmull-Rom' interpolation.
Modified
- experimental
g2.State.hatch
fill style removed. g2.prototype.ply.iterator
default iterators modified for improved efficiency and working also with splines.
2.1.1 - 2016-05-15
Modified
g2.cor.js
+g2.c2d.js
=>g2.js
(reunited).g2.context
namespace introduced.
2.1.0 - 2016-01-17
Added
style
argument for elementslin
,rec
,cir
,arc
,ply
.style
as first argument forstroke
,fill
anddrw
, optionally followed by a svg path definition string.
Changed
- State stack reimplemented.
1.1.0 - 2016-01-08
Added
CHANGELOG.md @goessner.