rsandor edited this page Aug 9, 2011 · 21 revisions


Gury (pronounced "jury") is a simple to use utility library for drawing, animating, and managing HTML5 canvas tags. The goal is to support the HTML5 Canvas API with a framework that allows for faster/easier application development.

It was built with simplicity in mind and its usage was modeled in the image of jQuery. For instance you can initialize, style, and animate an entire scene in a single expression using chaining:

$g('screen').size(100, 100).add({
  theta: 0, 
  draw: function(ctx) {
    ctx.translate(50, 50);
    ctx.fillStyle = "#ada";
    ctx.fillRect(-32, -32, 64, 64);
    this.theta += Math.PI / 120;

Neat, eh? There's a whole lot more you can do with Gury, so make sure to checkout the API Documentation for information about other cool ways to use it in your projects.


The Gury documentation has been separated into sub pages for each basic part of its functionality.

Browser Compatibility

Below is the working status of Gury in various Canvas enabled browsers. If you primarily use a browser check out the demos folder and see if any of them fail. If so please raise an issue!

  • Chrome - Tested and Working (v 6.0)
  • Safari - Tested and Working (v 5.0.2)
  • FireFox - Tested and Working (v 3.5.14)
  • Opera - Tested and Working (v 10.63)