monk-e-boy

This is my code: var renderer = PIXI.autoDetectRenderer(500, 500, {backgroundColor:0xFFFFFF}, true);var stage = new PIXI.Stage(0xFFFFFF);stage.interactive = true; //document.getElementById("canvas").appendChild(renderer.view);document.body.appendChild(renderer.view); var rect = new PIXI.Graphics();rect.lineStyle(1, 0x00ffff); rect.interactive = true;rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);rect.drawRect(0,0, 200,200);rect.click = function(ev) { console.log("clicked"); }rect.mouseover = function(ev) { console.log("over"); rect.lineStyle(1, 0xff0000);}rect.mouseout = function(ev) { console.log("over"); rect.lineStyle(1, 0x00ffff); // rect.drawRect(0,0, 200,200);}stage.addChild(rect); stage.hitArea = new PIXI.Rectangle(0,0,500,500); stage.mouseover = function(ev) { console.log('m');} stage.mouseup = function(ev) { console.log(ev.x);} update();function update(){ requestAnimationFrame(update); renderer.render(stage); //rect.drawRect(0,0, 200,200);}; I just wanted to change the color of the rect as the mouse went over it

How would I change the color of a rectangle as the mouse hovers it? I am confused as to where in the code I render the rect.... I add them to the stage, then: update();function update(){ requestAnimationFrame(update); renderer.render(stage); //rect.drawRect(0,0, 200,200);}; but nothing is drawn? Uncommenting the line will draw the rect.