JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<canvas id="myCanvas" width="500" height="300"></canvas>

JavaScript

function buildCanvas(settings){

          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var ctx = canvas.getContext("2d");
          var images = [
            'https://images.caradisiac.com/logos/2/4/5/0/152450/S7-Ferrari-FF-une-quatre-roues-motrices-qui-se-pilote-comme-une-propulsion-65395.jpg',
            'hhttp://farm8.staticflickr.com/7229/7330163782_78581abb86.jpg',
            'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Ferrari_FF_Autosalon_Genf_1.JPG/1024px-Ferrari_FF_Autosalon_Genf_1.JPG',
            'https://st2.depositphotos.com/2777531/11861/v/950/depositphotos_118611678-stock-illustration-ff-initial-letter-logotype.jpg'
          ];
          var imagesLoading = images.length;
          
          // Image loader.
          var loadImage = function(i) {
             var img = new Image();
             img.onload = function() {
               images[i] = img;
               --imagesLoading;
               // Call the complete callback when all images loaded.
               if (imagesLoading === 0) {
                 workDone();
               }
             };
             img.src = images[i];
          };
          
          // Call upon all images loaded.
          var workDone = function() {
            // Clear canvas
            canvas.width = canvas.width;
            
             // Anything you want to notify the user image is Ready.
            ctx.fillText("Ready", 100, 130);
            
            
            var i, iLen = images.length;
            for (i = 0; i < iLen; ++i) {
              context.drawImage(images[i], 100*i, 0, 100*(i+1), 100);
            }
          };
           
          // Start to load all images.
          var i;
          for(i = 0; i < imagesLoading; ++i) {
            loadImage(i);
          }
  
          // Show image loading. with animation or something else...
          ctx.fillText("loading", 100,  130);
}

buildCanvas();