JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Image on canvas with red gradient 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 context = canvas.getContext("2d");

// 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() {
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);

    // overlay a red gradient 
    drawSemiTransparentOverlay(canvas.width / 2, canvas.height)

}

function drawSemiTransparentOverlay(w, h) {

    // create a temporary canvas to hold the gradient overlay
    var canvas2 = document.createElement("canvas");
    canvas2.width = w;
    canvas2.height = h
    var ctx2 = canvas2.getContext("2d");

    // make gradient using ImageData
    var imgData = ctx2.getImageData(0, 0, w, h);
    var data = imgData.data;
    for (var y = 0; y < h; y++) {
        for (var x = 0; x < w; x++) {
            var n = ((w * y) + x) * 4;
            data[n] = 255;
            data[n + 1] = 0;
            data[n + 2] = 0;
            data[n + 3] = 255;
            if (x > w / 2) {
                data[n + 3] = 255 * (1 - ((x - w / 2) / (w / 2)));
            }
        }
    }

    // put the modified pixels on the temporary canvas
    ctx2.putImageData(imgData, 0, 0);

    // draw the temporary gradient canvas on the visible canvas
    context.drawImage(canvas2, 0, 0);

}