freeCodeCamp/guide/english/canvas/pixi-js/index.md

title
PixiJS

PixiJS

Introduction

Pixi.js is an open source, cross browser JavaScript 2D WebGL graphics library with canvas fallback.

Example 1

The rotating bunny

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent transformation
    bunny.rotation += 0.1 * delta;
});

You can find this running example here: http://pixijs.io/examples/index.html#/basics/basic.js