Image color overlay

by SerGen

JavaScript

var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAmVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjHWqVAAAAMnRSTlMA39jbIo85fgV4cScK5s6GbEcy+uOmioNgTRrUy8N7aEL2oFQ+F+24smVaV04tFJyFSbnfcukAAAEwSURBVDjLzVLZboMwEBzbsQGbIxDOQANpkzZnj/z/x3VRc9QIJa8ZCaRlh53R7uDpMOenE5vcIUxfAbkY78UR/akl4BQ0Kd8N+yUrgpWpD0DHEsUkd+x+RcpVzTQIreA7rHlrEfIIA+jMKifpnt6ubpaz0PN7S0ECC4qTtXCz8l2VCbL7UsHGkcENz8Za4SPsLIFFIaZoPy515mCfRo65Eph0OpoaX+qEk6aXiyvhhB7vn9cPM7e3PHtAwI0gpBOTxM9/iTj/EpZJje3N5AKl8LR1VhPAbZzzTbmPRsGGonnrcNP5vsp4v6iD3TfpW+972iyXf6teDVYt85HsWOcODCqeeiBsGSvp3OUgMEGUKlOTkGLHhEnujUbOkzSbnnlEzDFoEi6+78W+ptgbPBt+ARCgEaC7UXowAAAAAElFTkSuQmCC";
var color = '#fff';

var i = new Image();

i.onload = function () {
  var c = document.createElement('canvas');
  var cx = c.getContext('2d');

  c.width = this.width;
  c.height = this.height;

  cx.drawImage(this, 0, 0);

  cx.globalCompositeOperation = 'source-in';
  cx.fillStyle = color;
  cx.fillRect(0, 0, c.width, c.height);

  document.body.innerHTML += '<img src="'+ c.toDataURL() +'">';
};

i.src = src;