Learn PIXIJS with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple PixiJS Scene

# pixijs/demo/index.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = app.screen.width / 2;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        app.ticker.add(() => { sprite.rotation += 0.01; });
        </script>
    </body>
</html>

A basic PixiJS example that creates a canvas and renders a rotating sprite.

Let’s Try →

PixiJS Moving Sprite

# pixijs/demo/move_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        app.ticker.add(() => { sprite.x += 2; if(sprite.x > app.screen.width) sprite.x = 0; });
        </script>
    </body>
</html>

A sprite that moves horizontally across the screen.

Let’s Try →

PixiJS Scaling Sprite

# pixijs/demo/scale_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = app.screen.width / 2;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        let scaleUp = true;
        app.ticker.add(() => {
        if(scaleUp) sprite.scale.x += 0.01; else sprite.scale.x -= 0.01;
        if(sprite.scale.x > 2) scaleUp = false;
        if(sprite.scale.x < 1) scaleUp = true;
        });
        </script>
    </body>
</html>

Animates sprite scaling up and down.

Let’s Try →

PixiJS Multiple Sprites

# pixijs/demo/multiple_sprites.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprites = [];
        for(let i=0; i<5; i++) {
        const s = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        s.anchor.set(0.5);
        s.x = 100 + i*120;
        s.y = app.screen.height / 2;
        app.stage.addChild(s);
        sprites.push(s);
        }

        app.ticker.add(() => {
        sprites.forEach(s => s.rotation += 0.01);
        });
        </script>
    </body>
</html>

Adds multiple sprites to the stage and rotates them.

Let’s Try →

PixiJS Interactive Sprite

# pixijs/demo/interactive_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        app.stage.addChild(sprite);

        app.stage.interactive = true;
        app.stage.on('pointermove', (e) => {
        const pos = e.data.global;
        sprite.x = pos.x;
        sprite.y = pos.y;
        });
        </script>
    </body>
</html>

A sprite that follows the mouse pointer.

Let’s Try →

PixiJS Draggable Sprite

# pixijs/demo/draggable_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.interactive = true;
        sprite.buttonMode = true;
        app.stage.addChild(sprite);

        sprite.on('pointerdown', (e) => {
        sprite.data = e.data;
        sprite.dragging = true;
        });

        sprite.on('pointerup', () => { sprite.dragging = false; sprite.data = null; });
        sprite.on('pointerupoutside', () => { sprite.dragging = false; sprite.data = null; });

        app.ticker.add(() => {
        if(sprite.dragging) {
        const newPos = sprite.data.global;
        sprite.x = newPos.x;
        sprite.y = newPos.y;
        }
        });
        </script>
    </body>
</html>

Makes a sprite draggable with pointer events.

Let’s Try →

PixiJS Scale and Rotate

# pixijs/demo/scale_rotate.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = app.screen.width / 2;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        let scaleUp = true;
        app.ticker.add(() => {
        sprite.rotation += 0.02;
        if(scaleUp) sprite.scale.x += 0.01; else sprite.scale.x -= 0.01;
        if(sprite.scale.x > 2) scaleUp = false;
        if(sprite.scale.x < 1) scaleUp = true;
        });
        </script>
    </body>
</html>

Sprite rotates and scales continuously.

Let’s Try →

PixiJS Random Movement

# pixijs/demo/random_movement.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        app.stage.addChild(sprite);

        app.ticker.add(() => {
        sprite.x += (Math.random()-0.5)*5;
        sprite.y += (Math.random()-0.5)*5;
        });
        </script>
    </body>
</html>

Sprite moves randomly on the screen.

Let’s Try →

PixiJS Follow Path

# pixijs/demo/follow_path.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = 0;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        app.ticker.add(() => {
        sprite.x += 2;
        sprite.y = app.screen.height / 2 + Math.sin(sprite.x/20)*50;
        if(sprite.x > app.screen.width) sprite.x = 0;
        });
        </script>
    </body>
</html>

Sprite moves along a sine wave path.

Let’s Try →

Code Sample Descriptions

Simple PixiJS Scene

# pixijs/demo/index.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = app.screen.width / 2;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        app.ticker.add(() => { sprite.rotation += 0.01; });
        </script>
    </body>
</html>

A basic PixiJS example that creates a canvas and renders a rotating sprite.

Let’s Try →

PixiJS Moving Sprite

# pixijs/demo/move_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        app.ticker.add(() => { sprite.x += 2; if(sprite.x > app.screen.width) sprite.x = 0; });
        </script>
    </body>
</html>

A sprite that moves horizontally across the screen.

Let’s Try →

PixiJS Scaling Sprite

# pixijs/demo/scale_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = app.screen.width / 2;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        let scaleUp = true;
        app.ticker.add(() => {
        if(scaleUp) sprite.scale.x += 0.01; else sprite.scale.x -= 0.01;
        if(sprite.scale.x > 2) scaleUp = false;
        if(sprite.scale.x < 1) scaleUp = true;
        });
        </script>
    </body>
</html>

Animates sprite scaling up and down.

Let’s Try →

PixiJS Multiple Sprites

# pixijs/demo/multiple_sprites.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprites = [];
        for(let i=0; i<5; i++) {
        const s = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        s.anchor.set(0.5);
        s.x = 100 + i*120;
        s.y = app.screen.height / 2;
        app.stage.addChild(s);
        sprites.push(s);
        }

        app.ticker.add(() => {
        sprites.forEach(s => s.rotation += 0.01);
        });
        </script>
    </body>
</html>

Adds multiple sprites to the stage and rotates them.

Let’s Try →

PixiJS Interactive Sprite

# pixijs/demo/interactive_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        app.stage.addChild(sprite);

        app.stage.interactive = true;
        app.stage.on('pointermove', (e) => {
        const pos = e.data.global;
        sprite.x = pos.x;
        sprite.y = pos.y;
        });
        </script>
    </body>
</html>

A sprite that follows the mouse pointer.

Let’s Try →

PixiJS Draggable Sprite

# pixijs/demo/draggable_sprite.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.interactive = true;
        sprite.buttonMode = true;
        app.stage.addChild(sprite);

        sprite.on('pointerdown', (e) => {
        sprite.data = e.data;
        sprite.dragging = true;
        });

        sprite.on('pointerup', () => { sprite.dragging = false; sprite.data = null; });
        sprite.on('pointerupoutside', () => { sprite.dragging = false; sprite.data = null; });

        app.ticker.add(() => {
        if(sprite.dragging) {
        const newPos = sprite.data.global;
        sprite.x = newPos.x;
        sprite.y = newPos.y;
        }
        });
        </script>
    </body>
</html>

Makes a sprite draggable with pointer events.

Let’s Try →

PixiJS Scale and Rotate

# pixijs/demo/scale_rotate.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = app.screen.width / 2;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        let scaleUp = true;
        app.ticker.add(() => {
        sprite.rotation += 0.02;
        if(scaleUp) sprite.scale.x += 0.01; else sprite.scale.x -= 0.01;
        if(sprite.scale.x > 2) scaleUp = false;
        if(sprite.scale.x < 1) scaleUp = true;
        });
        </script>
    </body>
</html>

Sprite rotates and scales continuously.

Let’s Try →

PixiJS Random Movement

# pixijs/demo/random_movement.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        app.stage.addChild(sprite);

        app.ticker.add(() => {
        sprite.x += (Math.random()-0.5)*5;
        sprite.y += (Math.random()-0.5)*5;
        });
        </script>
    </body>
</html>

Sprite moves randomly on the screen.

Let’s Try →

PixiJS Follow Path

# pixijs/demo/follow_path.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
    </head>
    <body>
        <script>
        const app = new PIXI.Application({ width: 800, height: 600 });
        document.body.appendChild(app.view);

        const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = 0;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        app.ticker.add(() => {
        sprite.x += 2;
        sprite.y = app.screen.height / 2 + Math.sin(sprite.x/20)*50;
        if(sprite.x > app.screen.width) sprite.x = 0;
        });
        </script>
    </body>
</html>

Sprite moves along a sine wave path.

Let’s Try →