How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

Question

I currently have a string, like the one displayed below, that I would like to tone an image with. I have searched Google in-access of 16 hours over the period of 2 weeks try

Answer 1

Good question! This isn't the kind of thing that's immediately obvious. But it is actually very simple provided you understand how to make grayscale images.

So lets do that first:

function grayscale() {
  var can = document.getElementById('canvas1');
  var ctx = can.getContext('2d');

  var imageData = ctx.getImageData(0,0,can.width, can.height);
  var pixels = imageData.data;
  var numPixels = pixels.length;

  ctx.clearRect(0, 0, can.width, can.height);

  for (var i = 0; i < numPixels; i++) {
      var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
      // set red green and blue pixels to the average value
      pixels[i*4] = average;
      pixels[i*4+1] = average;
      pixels[i*4+2] = average;
  }
  ctx.putImageData(imageData, 0, 0);
}

What this is doing is taking the average color of each pixel's Red, Green, and Blue, and setting the R, G, and B to that same average number. If the RGB values are all identical, that pixel will be gray (or black or white).

But you want to tint it, thought, not just make the pixels gray. Well its not hard from here. You see those three lines:

      pixels[i*4] = average;
      pixels[i*4+1] = average;
      pixels[i*4+2] = average;

Make them to something like:

      pixels[i*4] = average;
      pixels[i*4+1] = average + 30;
      pixels[i*4+2] = average;

The green pixel is "above average". It is now going to be tinted green.

Go ahead and give that a try:

http://jsfiddle.net/3eUBk/2/