JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<canvas id="cv" width="300" height="300"></canvas>

JavaScript

var bot = new Image();
var top = new Image();

var numLoaded = 0;

function draw() {

    var offScreen = document.createElement('canvas'); 
    offScreen.width = offScreen.height = 300;
    var ctx2 = offScreen.getContext('2d');

    ctx2.drawImage(top, 0, 0, 300, 300);
    var gradient = ctx2.createRadialGradient(150, 150, 0,
                                            150, 150, 150);

    gradient.addColorStop(0, 'rgba(255,255,255,0)');
    gradient.addColorStop(1, 'rgba(255,255,255,1)');

    ctx2.fillStyle = gradient;
    ctx2.globalCompositeOperation = 'destination-out';
    ctx2.fillRect(0, 0, 300, 300);

    var ctx = document.getElementById('cv').getContext('2d');
    ctx.drawImage(bot, 0, 0, 300, 300);
    ctx.drawImage(offScreen, 0, 0, 300, 300);
}

bot.onload = function () { if ( ++numLoaded == 2 ) draw(); }
top.onload = function () { if ( ++numLoaded == 2 ) draw(); }

bot.src = 'http://www.netstate.com/states/symb/'
        + 'flowers/images/apple_blossoms.jpg';
top.src = 'http://www.netstate.com/states/'
        + 'symb/flowers/images/oklahoma_rose.jpg';