Portrait Light Canvas Filter

by Arjan Haverkamp

HTML

<canvas id='cv' width=1280 height=853 style="max-width:100%"></canvas>
<output id='output'></output>

JavaScript

// Canvas setup
var cv = document.getElementById('cv');
var ctx = context = cv.getContext('2d');
var canvasWidth = cv.width, canvasHeight = cv.height;

var wallImg = new Image();
wallImg.onload = drawScene;
wallImg.src = 'https://cdn.pixabay.com/photo/2016/11/22/06/05/girl-1848454_1280.jpg';

function darken(x, y, w, h, darkenColor, amount) {
    ctx.fillStyle = darkenColor;
    ctx.globalAlpha = amount;
    ctx.fillRect(x, y, w, h);
    ctx.globalAlpha = 1;
}

function drawScene() {
  ctx.drawImage(wallImg,0,0);
  // Ddarken the wall, with a bit of blue
  darken(0, 0, canvasWidth, canvasHeight, '#003', 0.2);
  ligthenGradient(560, 300, 260);
}

function ligthenGradient(x, y, radius) {
  ctx.save();
  ctx.globalCompositeOperation = 'lighter';
  var rnd = 0.05 * Math.sin(1.1 * Date.now() / 1000);
  radius = radius * (1 + rnd);
  var radialGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
  radialGradient.addColorStop(0.0, '#BB9');
  radialGradient.addColorStop(0.2 + rnd, '#AA8');
  radialGradient.addColorStop(0.7 + rnd, '#330');
  radialGradient.addColorStop(0.90, '#110');
  radialGradient.addColorStop(1, '#000');
  ctx.fillStyle = radialGradient;
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.restore();
}