Динамическое изменение размера центрированного холста PixiJS и его содержимого при сохранении соотношения

Question

Я пробовал много решений, чтобы найти способ центрировать холст pixiJS в окне, который бы сохранял соотношение и изменял размер содержимого.

Все, что я хочу, это чтобы холст сохранял свое соотношение и не уменьшался при изменении размера окна. Небольшая особенность в том, что холст заполняет все окно, когда мы на смартфоне или планшете (когда ориентация в альбомной ориентации).

Лучшее, что я могу получить, это пример: http://www.thierrygallus.com/game/

Я использовал медиа-запросы, но они не сохраняют соотношение и могут уменьшаться, когда мы слишком сильно уменьшаем высоту окна. Вот код:

/* all other device that are really small */
@media (max-width: 576px) {
    .background {
        background-color: #2f3640;    
    }

    .canvas {
        width: 98%;
        margin: 1%;
    }
}

/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .background {
        background-color: #2f3640;    
    }

    .canvas {
       width: 98%;
       margin: 1%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .background {
       background-color: #2f3640;    
    }

    .canvas {
       width: 98%;
       margin: 1%;
    }
}

/* all other devices that are big */
@media (min-width: 1200px) {
    .canvas {
       height: 80%;
       width: 80%;
       margin: 4.5% 10%;
       padding: 0;
    }
}

/* NO ROTATION ALERT FOR DEVICES UPPER THAN 992PX (screen computers) */
@media (min-width: 992px) {
    .background {
       width: 100%;
    }

    .rotate-alert {
       display: none;
    }
}

/* DISPLAY FULLSCREEN WHEN DEVICE UNDER 992PX ARE IN LANDSCAPE ORIENTATION */
@media (max-width: 1200px) and (orientation: landscape) {
    html, body {
       height: 100%;
       margin: 0;
    }

    .background {
       background-color: #2f3640;
       width: 100%;
    }

    .canvas {
       height: 96%;
       width: 98%;
       margin: 0.5% 1%;
    }

    .rotate-alert {
       display: none;
    }
}

Я предполагаю, что лучшим вариантом, безусловно, будет JavaScript, но я все еще новичок, и все скрипки, которые я видел, не сработали.