canvas image compositing

by intrinsica

HTML

<!DOCTYPE html>
<html><head>
<!-- forked from http://jsfiddle.net/ELmMT -->
<style>
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}
canvas{max-width=100%; max-height=100%;width: 100%;}
</style>
</head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>

JavaScript

var img1 = loadImage('https://www.w3schools.com/howto/img_girl.jpg', main);
var img2 = loadImage('https://www.w3schools.com/css/img_5terre.jpg', main);

var canvas = document.getElementById("canvas");
    canvas.width = 1920;
    canvas.height = 1080;
var ctx = canvas.getContext("2d");

var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;

    if(imagesLoaded == 2) {

        // composite now
        ctx.drawImage(img1, 0, 0);
        
        ctx.globalAlpha = 0.7;
        ctx.drawImage(img2, 100, 80);
    }
}

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;
}