JSFiddle - React, Tailwind, and code Playground

by janetyc

HTML

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

JavaScript

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    
    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 = {
ot1: 'https://dl.dropboxusercontent.com/u/823708/ot/ot.png',
ot2: 'https://dl.dropboxusercontent.com/u/823708/ot/ot2.png'
};

loadImages(sources, function(images) {
    context.drawImage(images["ot1"], 100, 30, 200, 137);
    context.drawImage(images["ot2"], 350, 55, 93, 104);
});