A few questions about pixi.js on building agar.io

Recently I am building an io game like agar.io.

But I encounter 2 problems now.

First, after reading up some articles in this forum about the camera on pixi.js.I found the best way is to set pivot to the container. I try this and work greatly. But I just wonder can I create another container called camera to perform the functionality of camera instead of using app.stage as a map and camera at the same time?

Secondly, what is the best way to get my circle bigger when I eat a food? The only way I think of is using PIXI.Graphics to draw a new circle and replace the old one with it.But it seems time-consuming and stupid. Are there any better solutions?

Thx everyone!

Below is my test code on pixi.

import * as PIXI from 'pixi.js';
// SOME ALIAS
const Application = PIXI.Application;
const Graphics = PIXI.Graphics;
const Sprite = PIXI.Sprite;
const ObservablePoint = PIXI.ObservablePoint;
const Container = PIXI.Container;
const Point = PIXI.Point;

// CREATE A NEW PIXI APP
const appConfig = {width: window.innerWidth, height: window.innerHeight,antialias: true, view: document.querySelector('#root')};
const app = new Application(appConfig);
 
// CREATE NEW SPRITES
const spriteMove = Circle(0xffffff,30);
app.stage.addChild(spriteMove);
const spriteStop = Circle(0xe83a30,50);
app.stage.addChild(spriteStop);
 
// SET CAMERA
// FIXME CAN'T NOT BUILD A INDEPENDENT CAMERA MAYBE BECAUSE OF THE PIXI ORIGINAL DESIGN
const camera = new Container();
app.stage.position.set(app.screen.width/2,app.screen.height/2);
 
// ANIMATION
app.ticker.speed = 0.1;
app.ticker.add(()=>{
spriteMove.x += 0.5;
spriteMove.y += 0.5;
// GROW BIGGER
// app.stage.children[0] = Circle(0xfff,r++);
// IT DOES NOT ASSIGN REFERENCE SO IT HAS TO BE PUT IN ANIMATION LOOP
app.stage.pivot.copy(spriteMove.position);
})
 
// GRAPH FUCNTION
function Circle(c, r){
const g = new Graphics();
g.lineStyle();
g.beginFill(c);
g.drawCircle(0, 0, r);
g.endFill();
const s = new PIXI.Sprite(g.generateCanvasTexture());
s.anchor.set(0.5,0.5);
return s;
}