JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<canvas width="512" height="512" id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img1 = loadImage('https://upload.wikimedia.org/wikipedia/commons/5/58/Oxford_University_Coat_Of_Arms.svg', main);
var img2 = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Afghanistan_provinces_numbered.png/350px-Afghanistan_provinces_numbered.png', main);

var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;
    
    console.log('asd');

    if(imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0);

        ctx.globalAlpha = 0.5;
        ctx.drawImage(img2, 0, 0);
    }
}

function loadImage(src, onload) {
  // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
  var img = new Image();
  img.onload = onload;
  img.src = src;
  return img;
}


function