Search the Community

var Container = PIXI.Container, loader = PIXI.loader, Sprite = PIXI.Sprite, resources = PIXI.loader.resources;var renderer = PIXI.autoDetectRenderer(256, 256);document.body.appendChild(renderer.view);var stage = new Container();renderer.backgroundColor = 0xffffff;renderer.render(stage);loader .add("images/ant.png") .on("progress", loadProgressHandler) .load(setup);function loadProgressHandler(loader, resource) { console.log(loader.progress);}var ant;function setup() { ant = new Sprite.fromImage("images/ant.png"); stage.addChild(ant); renderer.render(stage); renderer.view.style.position = "absolute" renderer.view.style.width = window.innerWidth + "px"; renderer.view.style.height = window.innerHeight + "px"; renderer.view.style.display = "block"; gameLoop();}function gameLoop() { requestAnimationFrame(gameLoop); renderer.render(stage);}This is how my game.js script actually looks like and so far I'm quite happy with what it's doing. But my problem is that all sprites I render on my canvas are distorted and do not keep their original sizes. So what am I doing wrong here? I just want to keep the original sizes of all objects I'll render on the canvas. (The ant.png image is 250x250px) How the result looks like: How the ant.png looks like: