How to make a BIG stage with drag & flick inside a canvas using Pixi.js?

[tommychoo]

i am learning a Pixi.js to make a animation web like this link below.

http://fetedelabiere.promo-agency.com/

I already created a project environment.

But i face a question such as this title.

How to make a BIG stage with drag & flick inside a canvas using Pixi.js ?

First i want to prepare a full screen canvas,

var screen_width = $(window).innerWidth();

var screen_height = $(window).innerHeight();


var renderer = PIXI.autoDetectRenderer(screen_width, screen_height, {backgroundColor : 0xcccccc});

Then i append the view to body tag.

$("body").append(renderer.view)

According to Pixi document, create the root of the scene graph

var stage = new PIXI.Container();


var texture = new PIXI.Texture.fromImage("images/pixel.jpg");

var bg = new PIXI.Sprite(texture);


bg.position.x = 0;

bg.position.y = 0;


stage.addChild(bg);

Then start the animation, fine.

animate();

function animate() {

requestAnimationFrame(animate);

renderer.render(stage);

}

But i don't know how to make the effect,

1. 1:1 size background-image
   
2. My background-image is over than 1920x1800, a huge background
   
3. If over than screen size, how to make the drag & flick inside a canvas like the link above.
   

Thanks and hope to give me some references.

[Sandro Santos]

You got make a drag and drop same the http://fetedelabiere.promo-agency.com/? With ease and bounds.