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);
};
stroke
to set the width/colormoveTo
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>