API: Drawing and Animation

dcsilva edited this page Sep 7, 2011 · 16 revisions

About Drawing and Animation

Gury handles drawing and animation in a simple and easy-to-use way. Using Gury you can draw objects using the .draw() method and animate them with the .play() method. Additionally you can pause, start, and stop animations at anytime (in addition to pausing and playing individual objects in the scene). Let's get started with a simple drawing example:

$g().size(100, 100).add(function(ctx) {
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 80, 80);

The example above adds a simple red square to the scene and draws it using the .draw() method. Now let's take a gander at a more complex animation example:

// Create a new canvas using Gury with size 100 x 100
$g().size(100, 100)
  // Create a new spinning green square
    theta: 0,
    draw: function(ctx, canvas) {
      ctx.fillStyle = "green";
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.fillRect(-32, -32, 64, 64);
    update: function() {
      this.theta += Math.PI / 120;
  // Place and animate the scene

The example above adds a green square object to the canvas and animates it with the .play() method.

For more examples on using the rendering and animation method provided by Gury see demos/demo2.html and demos/pausing.html in the source repository.


Below are the drawing and animation methods supported by Gury.


Renders the scene by drawing all of the objects to the canvas in the order they were added. Here's a quick example:

// Initialize gury
  // Add three objects (a, b, and c)
  // Draw the scene and objects in order

This method will draw to each canvas bound to the Gury instance.


Updates objects that have a .update() method. This method is called before .draw() for animations via the .play() method. This allows for you to separate out your update and rendering code and ensure updates have been performed before they are rendered to the screen.

The demos/tags.html uses this functionality extensively.


Clears the canvas (does not remove any objects bound to the Gury instance). An example:

// Draw a scene

// Sometime later clear the graphics...

This method will clear each canvas bound to the Gury instance.


Allows you to set whether or not the canvas is cleared upon redraw. By default the canvas is cleared every time you make a call to the .draw() method of the gury instance. Here's a quick example that turns off auto clearing:

// Turn off auto-clearing

You can turn auto-clearing back on by calling the method like so:

// Turn auto-clearing back on


Renders the scene repeatedly at fixed intervals creating an animation. This is most useful when used in conjunction with objects that change state on render. See demos/demo1.html and demos/demo3.html for examples of objects that change position or rotation on the screen as the animation plays. Here is a quick example:

$g('my_canvas').size(64, 64).add({
  theta: 0,
  update: function() {
    this.theta += Math.PI / 60;
  draw: function() {
    ctx.translate(64, 64);
    ctx.fillStyle = 'red';
    ctx.fillRect(-16, -16, 32, 32);


Toggles updates and rendering for the canvas itself. Individually paused objects will not be toggled back into motion by calling .pause() with no arguments. For more on pausing objects see .pause(object) and .pause(tag) below.


Toggles updates for a single object in the canvas. See demos/pausing.html for an example of how to use this.

// Initialize a Gury animation with three objects

// Pause only the second object and let the rest continue playing


Toggles updates for all objects with the given tag. Again, see demos/pausing.html for an example of how to use this.

// Initialize a Gury animation with a few of tagged objects
  .add('red', new Shape('red'))
  .add('red', new Shape('red'))
  .add('blue', new Shape('blue'));

// Pause only the "red" objects


Fully stops the gury animation. You must call play() in order to start the animation again after calling stop().