JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Using a linearGradient overlay</h4>
<canvas id="canvas" width=200 height=200></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

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

// draw an image on the canvas
var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/stack1/landscape1.jpg";

function start() {
    cw = canvas.width = img.width;
    ch = canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    // overlay a red gradient
    var gradient = ctx.createLinearGradient(50, ch / 2, cw / 2, ch / 2);
    gradient.addColorStop(0.00, "red");
    gradient.addColorStop(0.10, "red");
    gradient.addColorStop(1.00, "transparent");
    ctx.fillStyle = gradient;
    ctx.fillRect(50, 0, cw / 2 - 50, ch);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 50, ch);
}