34

[Chrome v32]

How to draw a basic RED rectangle with PIXI.js library ?

I tried this (not working)

var stage = new PIXI.Stage(0xFFFFFF);
var renderer = PIXI.autoDetectRenderer(400, 300);
document.body.appendChild(renderer.view);
renderer.render(stage);
var rect = new PIXI.Rectangle(100, 150, 50, 50);
stage.addChild(rect);

Error:

Uncaught TypeError: Object [object Object] has no method 'setStageReference'

user3350705Ol
  • 469
  • 1
  • 4
  • 8

3 Answers3

74

You can't render geometry (Pixi.Rectangle), they are meant for calculations only. You can do the following instead:

var graphics = new PIXI.Graphics();

graphics.beginFill(0xFFFF00);

// set the line style to have a width of 5 and set the color to red
graphics.lineStyle(5, 0xFF0000);

// draw a rectangle
graphics.drawRect(0, 0, 300, 200);

stage.addChild(graphics);

source

Neuron
  • 5,141
  • 5
  • 38
  • 59
Daniel Kaplan
  • 62,768
  • 50
  • 234
  • 356
12

Geometries are not renderable, they are for doing geometric calculations.

Source @xerver

So we have to use PIXI.Graphics()

user3350705Ol
  • 469
  • 1
  • 4
  • 8
12

There is a nice way to do this using PIXI.Texture.WHITE.

const rectangle = PIXI.Sprite.from(PIXI.Texture.WHITE);
rectangle.width = 300;
rectangle.height = 200;
rectangle.tint = 0xFF0000;
stage.addChild(rectangle);
Neuron
  • 5,141
  • 5
  • 38
  • 59
gischer
  • 274
  • 1
  • 3
  • 8