Welcome!

gury (pronounced "jury") is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface.

With gury you can create a canvas tag, resize and style it, add renderable objects, animate those objects, and place it anywhere on the page in a single chained expression.

But don’t just take our word for it, check out the examples to the right.

Getting Started

View the API Documentation and use the sample code below to get started making apps with gury right away:

Copy to Clipboard
<!DOCTYPE html><html>
  <head>
    <title>My Awesome Gury App</title>
  </head>
  <body>
    <!-- Load jQuery for extra .place() functionality -->
    <script type="text/javascript" charset="utf-8" 
      src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

    <!-- Load gury library --> 
    <script type="text/javascript" charset="utf-8" 
      src="http://github.com/downloads/rsandor/gury/gury.min.js"></script>

    <!-- Create my awesome app! -->
    <script type="text/javascript" charset="utf-8">
      // Create and style a new canvas using gury
      $g().size(256, 256).background("#363").add({

        // Hold some object information
        size: 128, theta: 0, dTheta: Math.PI / 120,

        // Updates the object rotation each frame
        update: function() {
          this.theta += this.dTheta;
        },

        // Draws the object onto the canvas each frame
        draw: function(ctx, canvas) {
          ctx.fillStyle = "#ada";
          ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(this.theta);
            ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);
          ctx.restore();
        }
      })

      // Finally place the canvas in the body tag and begin animation
      .place("body").play(33);
    </script>
  </body>
</html>