Chnage GIF color

by Vivek kt

HTML

<canvas id="canvas" width=400 height=200></canvas>

CSS

body {
  background: #999;
}

JavaScript

var img = new Image,
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');

/// change to this color
ctx.fillStyle = 'red';

/// load image, when ready render it with new color
img.onload = render;
img.src = 'http://www.designbuildsigns.com/wp-content/uploads/2016/02/221.png';

function render() {
  /// this composite mode clears the canvas as well
  ctx.globalCompositeOperation = 'copy';
  ctx.drawImage(img, 0, 0, 150, 180);

  /// this mode fills in whatever, in the image
  ctx.globalCompositeOperation = 'source-in';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}