Draw a rectangle with pixi.js

Question

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

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