Gury for HTML5 Canvas Applications

Reference: http://guryjs.org/

HTML

<script src="http://github.com/downloads/rsandor/gury/gury.min.js"></script>

JavaScript

// 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(11);