Pixi.js container not fully displaying

[Powerzaba]

Hello everyone!
I have a grid system with tiled textures on my canvas, all of these textures are inside a container, i've set the width of my PIXI application to be the columns times the size of the squares (the square textures) and the height to be the rows times the size of the squares. Over a certain number of columns and rows the container is being cut and is not showing the "outer tiles".

This is the code that I'm using to generate the "map":

//Setup
PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
//TODO change name from test to official
var canvas = document.getElementById("test-canvas");

var roverTimeline = new TimelineLite();
var droneTimeline = new TimelineLite();
const row = 27;
const col = 50;
const container = new PIXI.Container();
const squareSize = 20;
const grid = [];
const app = new PIXI.Application({
    width: col*squareSize,
    height: row*squareSize,
    antialias: true,
    transparent: true,
    resolution: 1,
		view: document.getElementById("test-canvas"),
	}
);
app.renderer.autoResize = true;
app.stage.addChild(container);

drawGrid();
//Center container
container.x = (app.screen.width - container.width) / 2;
container.y = (app.screen.height - container.height) / 2;

//Add drone & rover on the grid/map
var roverSprite = new RoverSprite();
var droneSprite = new DroneSprite();

//test path for rover
path = [
	{posx: 1, posy:0},
  {posx: 2, posy:0},
	{posx: 2, posy:1},
  {posx: 3, posy:1},
]

//Test movement
roverSprite.followPath(path);
droneSprite.moveTo(10, 15);

//Creating square sprites and add them to the 2D array 'grid'
function drawGrid() {
	for (var i = 0; i < col; i++) {
		grid[i] = [];
		for (var j = 0; j < row; j++) {
			var num = Math.random();
			if (num > 0.01) {
				var terrain = new GrassSprite(i, j, col, row);
			} else {
				var terrain = new RockSprite(i, j, col, row);
			}
			terrain.posx = i;
			terrain.posy = j;
			terrain.sprite.x = (i % col) * squareSize;
			terrain.sprite.y = Math.floor(j % row) * squareSize;
      container.addChild(terrain.sprite);
			grid[i][j] = terrain;
		}
	}
}

I will attach two pictures below, the first one has 27 row and 50 columns and you can see the drone and the rover (red and blue circles), the other picture has like 500 columns and 300 rows and the outer areas are being cut.

 

[ivan.popelyshev]

Max size of renderer is 4096 or so. Try read some threads in this subforum that are related to tilemap. 

Start from this post:

Also, antialias is bad in your case, hurts performance.