icholy/change_color.html

## change_color.html
<html>
  <head>
    <title>Change Image Color</title>
    <style>
      body { background-color: black; }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>

      var can = document.getElementById('canvas'),
          ctx = can.getContext('2d'),
          img = new Image(),
          rgb = [255, 100, 0];

      img.onload = function () {

          // draw the image
          can.width  = img.width;
          can.height = img.height;
          ctx.drawImage(img, 0, 0, img.width, img.height);

          // change the color
          var map  = ctx.getImageData(0, 0, img.width, img.height),
              data = map.data,
              r    = rgb[0],
              g    = rgb[1],
              b    = rgb[2],
              i;
          for (i = 0; i < data.length; i += 4) {
            if (data[i + 3] !== 0) {
              data[i]     = r;
              data[i + 1] = g;
              data[i + 2] = b;
            }
          }
          ctx.putImageData(map, 0, 0);
      }

      img.src = 'RADAR.png';

    </script>
  </body>
</html>
	<html>
	<head>
	<title>Change Image Color</title>
	<style>
	body { background-color: black; }
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<script>

	var can = document.getElementById('canvas'),
	ctx = can.getContext('2d'),
	img = new Image(),
	rgb = [255, 100, 0];

	img.onload = function () {

	// draw the image
	can.width = img.width;
	can.height = img.height;
	ctx.drawImage(img, 0, 0, img.width, img.height);

	// change the color
	var map = ctx.getImageData(0, 0, img.width, img.height),
	data = map.data,
	r = rgb[0],
	g = rgb[1],
	b = rgb[2],
	i;
	for (i = 0; i < data.length; i += 4) {
	if (data[i + 3] !== 0) {
	data[i] = r;
	data[i + 1] = g;
	data[i + 2] = b;
	}
	}
	ctx.putImageData(map, 0, 0);
	}

	img.src = 'RADAR.png';

	</script>
	</body>
	</html>