Imitate a canvas background

It is not trivial to do it. What you see in the background is a texture made with Three.js using the renderer webgl .

Additionally, the script that loads the site takes an element with id #app and it assembles a component of Vue.js

When mounting the component, it fills all the HTML that goes inside the body , that HTML has elements with certain classes, and surely in the event mount of the component calls are made to Three.js to assign the different textures , behaviors and cameras to the respective canvas.

The script that is being called is apparently minified and consolidated using webpack (and vuejs-template-loader) where the same component is found plus three.js and other dependencies. This means that it is virtually impossible to know which event fills what element with what texture.

Additionally the textures are associated with materials and etc etc. Three.js is not trivial at all.

Short answer:

You have to use Three.js and render with WebGL. Although the result of this operation is effectively used to fill a canvas, you could not achieve more than a very distant imitation with native functions of a Canvas.

Functional example

I'll give you an example using the least complex I could:

• I create a scene
• I create a camera
• I define the height of the camera
• I create a WebGL renderer and give it properties
• That renderer creates a canvas for me and I add it to the document.body
• I create a planar geometry, a mesh material and I add this to the scene
• I create three lights, of different colors, like spotlights pointing at a certain distance over a certain position
• I add the lights to the scene
• I tell the renderer to draw everything I declared

function init() {
      var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 30);
        camera.position.z = 25;

        var renderer = new THREE.WebGLRenderer({ antialias: true });

                renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000, 1);
        document.body.appendChild(renderer.domElement);

        var planeGeometry = new THREE.PlaneGeometry(100, 100);
        var meshMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });

        scene.add(new THREE.Mesh(planeGeometry, meshMaterial));

        var lights = [];
        lights[0] = new THREE.PointLight(0xff0000, 1, 100, 2);
        lights[1] = new THREE.PointLight(0x00ff00, 1, 100, 2);
        lights[2] = new THREE.PointLight(0x0000ff, 1, 100, 2);

        lights[0].position.set(-25, -2, 20);
        lights[1].position.set(25, 5, 20);
        lights[2].position.set(0, 0, 15);

        scene.add(lights[0]);
        scene.add(lights[1]);
        scene.add(lights[2]);

        renderer.render(scene, camera);
    }
    window.setTimeout(init,300);

canvas {
        width: 90%;
        height: 90%;
        margin: 0 auto;
    }

    body {
        overflow: hidden;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>