Draw a rectangle with pixi.js

pixi.js
user3350705Ol picture user3350705Ol · Feb 27, 2014 · Viewed 40.2k times · Source

[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'

Answer

Daniel Kaplan picture Daniel Kaplan · May 20, 2014

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

Related questions

Dynamically resize the pixi stage and it's contents on window resize and window load

I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize. And also have it initially load at the size of the browser window without changing ratio. I'm using the following to set the initial size basically …

Read More
Decide Pixi.js or Phaser

All: One of my school project is to make a realtime multiplayers webpage game, I am currently having difficulty to decide if I should go Pixi.js or Phaser for the game graphic and control, could anyone talk a little …

Read More
How can I scale the size of a sprite in Phaser/PixiJS without changing its position?

I'm making a game in Phaser using some large images that I want to scale down in the actual game: create() { //Create the sprite group and scale it down to 30% this.pieces = this.add.group(undefined, "pieces", true); this.pieces.…

Read More