How to resize the animation and paste it in the right place?

Question

JavaScript

Hi Toaster, I'm asking for help from more experienced people in the frontend field. There is a ready-made animation found on codepen.
Link to animation.
You need to insert this animation into your project, in a 200x200 pixel block.
I connected the necessary files, added js, the animation appeared on the site, but the problem is that the animation opens in full screen, and the tag is located at the end of the body document.
My question is:
1. How can I insert this animation into the div I need.
2. How to set the dimensions in the call function of this animation so that it fits into 200x200 pixels.
What was tried:
In the js animation call by the poke method, it was not possible to find the dimensions, although I came across familiar words, for example, these lines:

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

And right here

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

Therefore, I decided to "cheat" a little and set the dimensions of the canvas in the css property

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

It turned out so

Noticeably that the proportions of the animation are knocked down, because in the code the canvas tag has a width and height that is different from the one I specified in css. I'm sure that my way is wrong and you need to edit the size in js. Even after resizing, the animation seems to be drawn anew each time and with new proportions.
On the second point "How to insert animation into the desired block" I have no thoughts at all. I ask knowledgeable people to show where I need to change the necessary, or to direct me in the direction of the correct solution vector.
To be honest, there is no understanding of how everything is arranged in this code, I specialize more in layout layouts and simple things in jquery. But I need to learn, I'm picking this script myself for the third day, so I'm asking for help here.

Answer 1

The sizes are knocked down, because the canvas has its own viewport, the dimensions of this viewport are set through the tag attributes. And in CSS, you simply set the dimensions of the DOM element, which has nothing to do with the viewport.
It can be explained by analogies: here you have a modern fullHD TV, and they show an old movie on it. which was filmed in 4:3 format, naturally the film will be stretched in width. Here the movie is the viewport of your canvas, and the TV is the element itself in the DOM.
For the correct image, you need to find where the viewportWidth and viewportHeight are set.

Answer 2

https://jsfiddle.net/q5sqrec3/2/