JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        image1: 'http://farm3.static.flickr.com/2666/3686946460_0acfa289fa_m.jpg',
        image2: 'http://farm4.static.flickr.com/3611/3686140905_cbf9824a49_m.jpg'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.image1, 100, 30, 200, 137);
        context.drawImage(images.image2, 350, 55, 93, 104);
      });