Keep ascept-ratio of PIXI.Sprite with fullscreen fullscreen canvas

[JanV]

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:

 

[xerver]

Don't set the canvas size yourself, resize the renderer:

// this will ensure the canvas gets updated according to resolutionrenderer.autoResize = true;renderer.resize(width, height);

[JanV]

it works, thank you so much