Home

Canvallax is a small (5.4kb minified, 2kb gzipped) Javascript library with no dependencies for managing elements on <canvas>, with built in support for:

• Parallax Scrolling, with optional damping to smooth motions
• Images on Canvas, from URLs or nodes (<img />, <canvas />, etc) with Canvallax.Image
• Element stacking with zIndex
• Fixed position Elements
• Distance/scaling
• Element cloning

Canvallax is primarily meant to help with unifying positioning, scale and scroll effects for elements drawn on canvas, and some canvas knowledge will be needed for more advanced implementations like custom elements and animation.

Methods

Each Canvallax instance has the following methods:

• add(element,...): Add an element or array of elements to the Canvallax instance
• remove(element): Remove an element from the Canvallax instance
• render(): Clears canvas and renders all elements
• resize(width,height): Set canvas width and height
• resizeFullscreen(): Set canvas to full window width & height
• play(): Render Canvallax elements every requestAnimationFrame
• pause() or stop(): Stop Canvallax rendering

Utilities

• Canvallax.extend(object,object,...): Merge properties of objects onto the first object. If only one object provided, the properties will be applied to Canvallax, much like jQuery.extend.
• Canvallax.createElement(properties): Create an element type that can be added to Canvallax. The object provided will be added to that element's prototype and inherited by each element of that type. Each element type created should have a render property with a function that will actually draw that element on the canvas.

More

• Canvallax Options
• Canvallax Elements
  • Canvallax.Image
  • Canvallax.Circle
  • Canvallax.Rectangle
  • Canvallax.Polygon