Learn Pixijs - 9 Code Examples & CST Typing Practice Test

PixiJS is a fast, 2D rendering JavaScript library that leverages WebGL (with canvas fallback) to create interactive graphics, games, and applications for the web. It offers a high-performance API for sprites, textures, filters, and animations.

View all 9 Pixijs code examples →

Simple PixiJS Scene PixiJS Moving Sprite PixiJS Scaling Sprite PixiJS Multiple Sprites PixiJS Interactive Sprite PixiJS Draggable Sprite PixiJS Scale and Rotate PixiJS Random Movement PixiJS Follow Path

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 →

Frequently Asked Questions about Pixijs

What is Pixijs?

What are the primary use cases for Pixijs?

2D game development for web and mobile. Interactive web applications and dashboards. Animated banners and marketing content. Data visualization with GPU acceleration. Integration with other JS animation libraries (GSAP, Anime.js)

What are the strengths of Pixijs?

High-performance rendering for 2D content. Cross-browser and mobile friendly. Lightweight and extensible. Strong community and active development. Seamless integration with animation libraries like GSAP

What are the limitations of Pixijs?

2D only - no native 3D support. Complex scenes may require manual optimization. Learning curve for custom shaders and filters. No built-in physics engine. Limited DOM integration (requires canvas/WebGL context)

How can I practice Pixijs typing speed?

CodeSpeedTest offers 9+ real Pixijs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

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 →

Frequently Asked Questions about Pixijs

What is Pixijs?

What are the primary use cases for Pixijs?

What are the strengths of Pixijs?

What are the limitations of Pixijs?

How can I practice Pixijs typing speed?

CodeSpeedTest offers 9+ real Pixijs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.