JSFiddle - React, Tailwind, and code Playground

by ajmeese7

HTML

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

JavaScript

var ctx = $('#cv').get(0).getContext('2d');

var img = new Image();

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

img.onload = function() {
		ctx.fillRect(0, 0, 300, 300);
    ctx.drawImage(img, 0, 0, img.width, img.height, 0,0, img.width, img.height);
    ctx.globalCompositeOperation = "destination-out";
    gradient = ctx.createLinearGradient(0, 0, 0, img.height);
    gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
    ctx.fillStyle = gradient;
    /*ctx.drawImage(img, 0, 0, 300, 300);

    var gradient = ctx.createRadialGradient(150, 150, 0,
                                            150, 150, 150);

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

    ctx.fillStyle = gradient;

    ctx.fillRect(0, 0, 300, 300);*/
};