Skip to content

goessner/g2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

License npm npm no dependencies

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.
  • Addressing HTML canvas 2D context as the default renderer.
  • 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>
    const ctx = document.getElementById("c").getContext("2d"); // define context
    g2().rec({x:40,y:30,b:120,h:40, // create g2 object, add rectangle
              ls:"green",fs:"orange",lw:3}) // with style properties.
        .exe(ctx);  // draw to canvas.
</script>

first

Documentation

API Reference

See the API Reference for g2 for details.

Also see the API Reference for g2.ext and the API Reference for g2.mec.

Also available under

Cheat Sheet

Check out the single page Cheat Sheet.

Also available under https://goessner.github.io/g2/api/sheet.pdf

GitCDN

Use the link https://cdn.jsdelivr.net/gh/goessner/g2/dist/g2.js for getting the latest commit as a raw file.

In HTML use ...

<script src="https://cdn.jsdelivr.net/gh/goessner/g2/dist/g2.js"></script>

Tests

Tests are found on the Github Page

License

g2 is licensed under the terms of the MIT License.