Как изменить размер анимации и вставить её в нужное место?

Question

[Павел Антонов]

Привет Тостер, прошу помощи у более опытных людей в сфере фронтенда. Есть готовая анимация, найденная на codepen.
Ссылка на анимацию.

Нужно вставить эту анимацию в свой проект, в блок размером 200х200 пикселей.
Необходимые файлы подключил, js добавил, анимация на сайте появилась, но проблема в том, что анимация открывается в полный экран, и тег расположен в конце документа body.

Мой вопрос заключается в следующем:
1. Как вставить эту анимацию в нужный мне див.
2. Как в функции вызова этой анимации задать размеры, чтобы она влезала в 200х200 пикселей.

Что было испробовано:

В js вызове анимации методом тыка найти размеры не удалось, хотя знакомые слова мне попадались, например эти строки:

ArtScene.prototype.setup = function(gl)
    {                                
        ......
        this.fbo = new Fbo({
            size: [gl.viewportWidth, gl.viewportHeight] 
        });   
        ......
    }

И вот здесь

var pri = new PlanePrimitive({
            width: gl.viewportWidth, 
            height: gl.viewportHeight, 
            resolution: 1, 
            flipY: true, 
            drawMode: Primitive.TRIANGLES, 
        });

Поэтому я решил немного "схитрить" и выставил размеры canvas в css свойством

.surface canvas {
	width: 200px !important;
	height: 200px !important;
}

Вышло так


Заметно что пропорции анимации сбиты, т.к в коде у тега canvas прописана ширина и высота, отличная от той, что я указал в css. Я уверен что мой способ неправильный и нужно редактировать размер в js. Еще по ресайзу анимация как-будто каждый раз отрисовывается заново и с новыми пропорциями.

По второму пункту "Как вставить анимацию в нужный блок" у меня вообще нет мыслей. Прошу знающих людей показать где мне изменить необходмое, или же направить в сторону правильного вектора решения.

Честно говоря нет понимания как в этом коде всё устроено, я больше специализируюсь на вёрстке макетов и простых вещах в jquery. Но нужно учиться, сам ковыряю этот скрипт третий день, потому прошу помощи здесь.

Answer 1

[GreatRash]

Размеры сбиты, потому что у канваса свой вьюпорт, размеры этого вьюпорта задаются через атрибуты тега. А в CSS вы просто задаёте размеры DOM-элемента, который к вьюпорту никакого отношения не имеет.

Можно объяснить на аналогиях: вот у вас есть современный fullHD телефизор, а по нему показывают старое кино. которое было сняло под формат 4:3, естественно фильм получится растянутый по ширине. Вот фильм - это вьюпорт вашего канваса, а телевизор - это собственно сам элемент в DOM.

Для корректного изображения вам нужно обязательно найти где задаются viewportWidth и viewportHeight.

Comments

[Павел Антонов]

Спасибо, поищем