concept-it logo

GrayFrog Library

The GrayFrog canvas library is a simple and lightweight JavaScript library for working with the HTML 5 canvas element. It can be used for:

  • Display and manipulation of 'static' image objects
  • Animations (using actions)
  • Games

As of release 0.1 the following features are implemented:

  • Game loop
  • Image preloading
  • Spritesheet support
  • Support for high resolution displays
  • Sprite objects having the following properties: x, y, width, height, scale, rotation, opacity, image, z-order, visible, scheduled
  • Sprites can themselves be parent of children sprites (sprite hierarchy)
  • With scheduled sprites additional properties are automatically updated by the scheduler:
    • Speed and direction
    • Actions and actions sequences. Actions change properties (x, y, scale, rotation opacity) for a given duration. Different easing functions are available for actions.
    • Image frames for frame animations
    • Scrolling image for background (parallax) animations
  • Scheduled sprites can be marked as doomed, after which they will be deleted during the next update cycle
  • Custom drawing, update and event handling functions can be defined for a sprite
  • Default mouse and touch event handling (can be overridden)
  • Calculation of bounding rectangle of a sprite
  • Scenes and scene transitions