How to draw a simple line in pixi js

May 15, 2024

I’m new to pixi js and am using v8.1.1. I followed a simple tutorial to draw a single line and it’s not showing up on the canvas. It’s just an empty blue screen.

const { Application, Container, Assets, Sprite, Graphics } = PIXI;

window.onload = async () => {

  const app = new Application();

  await app.init({ background: '#1099bb', width: window.innerWidth, height: window.innerHeight, antialias: true });

  document.body.appendChild(app.canvas);

  const graphics = new Graphics();
  app.stage.addChild(graphics);

  graphics.position.set(0, 0);
  graphics.lineStyle(1, 0xFFFFFF, 1)
      .moveTo(0, 0)
      .lineTo(30, 30)
      .lineTo(303, 130);
};

>Solution :

Use stroke to set the width/color
Use moveTo over position.set

const { Application, Container, Assets, Sprite, Graphics } = PIXI;

window.onload = async () => {

 const app = new Application();

  await app.init({ background: '#1099bb', width: window.innerWidth, height: window.innerHeight, antialias: true });

  document.body.appendChild(app.canvas);

    const graphics = new Graphics();
    app.stage.addChild(graphics);

    graphics.moveTo(0, 0);
    graphics.lineTo(window.innerWidth, window.innerHeight);
  
    graphics.stroke({ width: 1, color: 0x00FF00 });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.1.2/pixi.min.js" integrity="sha512-64uu9rJpVQCmB5YRsiaetbtTm4bJsVZ2zu3fQE9i6BaEnM1y3NbvyJtnm45m+3v8oY8BzQzp5HJxFoRyl4wGpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>