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.
- 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.
<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>
See the API Reference for details.
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>
Check out the single page Cheat Sheet.
g2 is licensed under the terms of the MIT License.
#Change Log
earc
elliptical arc command added.
use
command execution simplified.- styling bug with
g2.prototype.use
removed. - internal
g2.prototype.addCmd
simplified.
g2.spline
performing 'centripetal Catmull-Rom' interpolation.
- experimental
g2.State.hatch
fill style removed. g2.prototype.ply.iterator
default iterators modified for improved efficiency and working also with splines.
g2.cor.js
+g2.c2d.js
=>g2.js
(reunited).g2.context
namespace introduced.
style
argument for elementslin
,rec
,cir
,arc
,ply
.style
as first argument forstroke
,fill
anddrw
, optionally followed by a svg path definition string.
- State stack reimplemented.
CHANGELOG.md @goessner.