Already the multiple images are drawn in a single canvas but I can't display that canvas image in laravel project

I am trying to draw multiple images into a single canvas it is working in the separate file. When I am trying to add this tag in the e-commerce project which is on the basis of laravel framework the image is not displaying.

Already drawn the images into a single canvas. But failed to show the image in the laravel project.

           <canvas id="my-canvas" width="484" height="984"></canvas>

    <script>
       const getContext = () => document.getElementById('my-canvas').getContext('2d');


        const loadImage = url => {
          return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = () => reject(new Error(`load ${url} fail`));
            img.src = url;
          });
        };


        const depict = options => {
          const ctx = getContext();

          const myOptions = Object.assign({}, options);
          return loadImage(myOptions.uri).then(img => {
            ctx.drawImage(img, myOptions.x, myOptions.y, myOptions.sw, myOptions.sh);
          });
        };

        const imgs = [
          { uri: 'Group 8.png', x: 1, y:  15, sw: 484, sh: 984 },
          { uri: 'Rectangle 6.png', x: 46, y:  15, sw: 395, sh: 746 },
          { uri: 'Motif_2.png', x: 1, y: 15, sw: 484, sh: 984 },
          { uri: 'body_design_2.png', x: 46, y: 15, sw: 395, sh: 746 }
        ];

        imgs.forEach(depict);

    </script>

Want to display the canvas image in the e-commerce website which is made by using the laravel framework.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2UacYgq
via IFTTT