В конечном итоге я хочу, чтобы холст заполнил всю ширину области просмотра браузера, а изображение на холсте заполнило всю ширину этого холста. Я использую фильтр смещения pixi. js, так что я могу создать псевдо-3D-эффект, используя карту глубины под ним. Код, который я сейчас использую:
let app = new PIXI.Application();
var w = window.innerWidth;
var h = w / ratio;
app.view.style.width = w + 'px';
app.view.style.height = h + 'px';
document.body.appendChild(app.view);
let img = new PIXI.Sprite.from("images/horses.png");
img.width = w;
img.height = h;
app.stage.addChild(img);
depthMap = new PIXI.Sprite.from("images/horses-depth.png");
depthMap.renderable = false;
depthMap.width = img.width;
depthMap.height = img.height;
img.addChild(depthMap);
app.stage.addChild(depthMap);
displacementFilter = new PIXI.filters.DisplacementFilter(depthMap, 0);
app.stage.filters = [displacementFilter];
Вот его скриншот в действии. 
Я даже пытался вручную установить ширину в пиксельную ширину области просмотра на холсте, а в спрайте - реальную ширину в пикселях ширины области просмотра, но он все еще был неправильного размера. Ручная установка ширины области просмотра и спрайта на одно и то же число также не работает; спрайт необъяснимо меньше, чем холст. Я попытался взглянуть на документацию класса sprite и посмотреть, есть ли что-то необычное в том, как спрайты обрабатывают ширину, но я не смог ничего найти https://pixijs.download/dev/docs/PIXI.Sprite.html Как мне создать pixi. js sprite который заполняет всю ширину холста, чтобы оба холста и спрайт заполняли всю ширину области просмотра? pixi js .download Pixi JS Документация по API Документация для Pixi JS библиотека