Canvas alpha tweaking

See http://stackoverflow.com/a/13187685/1130377

by ecmanaut

HTML

<canvas width="460" height="294"></canvas>
<div class="controls">
  <input type="range" id="r" min="0" max="255" step="1" value="255">
  <input type="range" id="g" min="0" max="255" step="1" value="0">
  <input type="range" id="b" min="0" max="255" step="1" value="0">
  <input type="range" id="a" min="0" max="1" step="0.004" value="1">
  <input type="range" id="x" min="0" max="300" step="1" value="100">
  <input type="range" id="y" min="0" max="269" step="1" value="25">
</div>

CSS

input[type="range"] {
  display: block;
  float: left;
  clear: left;
  width: 460px;
}

.controls {
  overflow: hidden;
}

JavaScript

var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');

colorize = function(image, r, g, b, a) {

  var newImg = $('<canvas>')[0];
  newImg.width = image.width;
  newImg.height = image.height;
  var newCtx = newImg.getContext('2d');
  newCtx.drawImage(image, 0, 0);

  var idata = newCtx.getImageData(0, 0, image.width, image.height);
  data = idata.data;
  for (var i = 0; i < data.length; i += 4) {
    data[i+0] = r;
    data[i+1] = g;
    data[i+2] = b;
    data[i+3] *= a;
  }
  newCtx.putImageData(idata, 0, 0);

  return newImg;
};

var landscape = new Image();
landscape.src = 'http://www.desertusa.com/images/Gobi_OmnogoviLandscape.jpg';
landscape.onload = function() {
  ctx.drawImage(landscape, 0, 0);
  console.log('working');
};

var trans = new Image;
trans.src = 'http://fiddle.jshell.net/img/logo.png';
landscape.onload = update = function() {
  var r = $('#r').val()
    , g = $('#g').val()
    , b = $('#b').val()
    , a = $('#a').val()
    , x = $('#x').val()
    , y = $('#y').val();
  ctx.drawImage(landscape, 0, 0);
  ctx.drawImage(colorize(trans, r, g, b, a), x, y);
};

$('input[type="range"]').change(update);