Forums » Help » Color changing an animationSheet

I'd like to know if it's possible to change an animationSheet's color ingame, through a method call similar to the one below.

//Adapted from http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/
colorChange: function(){
   var imageData = ig.system.context.getImageData(this.animSheet);
   var data = imageData.data;
   var red = 240;
   var green = 240;
   var blue = 240;
   var baseColor = 240;
   for(var i = 0; i < data.length; i += 4) {
     // i = red; i+1 = green; i+2 = blue
     if (data[i] == baseColor && data[i+1] == baseColor && data[i+2] == baseColor) {
     switch (this.owner) {
      case 1: //blue
       red = 0;
       green = 0;
       blue = 240;
      break;
      case 2: //red
       red = 240;
       green = 0;
       blue = 0;
      break;
      case 3: //green
       red = 0;
       green = 240;
       blue = 0;
      break;
      case 4: //yellow
       red = 250;
       green = 240;
       blue = 40;
      break;
     }
      data[i] = red;
      data[i + 1] = green;
      data[i + 2] = blue;
     }
   }
   // alpha channel
   //data[i + 3] = 255 - data[i + 2];
   // overwrite original image
   this.animSheet = imageData;
  },

Basically, I'm running through all pixels, looking for a specific color (240 white) and changing it according to the entity's 'owner' variable. However, context.getImageData() requires 4 parameters, which if I'm not mistaken, are the coordinates of the image rectangle.
Ideas?

Image Blender - tint / blend your images client side using any color

Thanks for pointing me there, Joncom.

For the RTS I'm creating, I'll need up to 4 instances of the same sheet. According to dominic in this post, I'll need to instantiate them all and then choose one.
http://impactjs.com/forums/help/change-animsheet#post706

I'm wondering how much of an impact in loading time that could have? Also, if there's another way instead of having to overwrite 5 variables with every different unit entity

ig.module('game.entities.SuperUnit')
.requires('impact.entity')
.defines(function(){
    EntitySuperUnit = ig.Entity.extend({
        animSheet: new ig.AnimationSheet( 'media/charset/char2.png', 24, 32 ),
		redSheet: new ig.AnimationSheet( 'media/charset/char2.png#FFabab', 24, 32 ),
		greenSheet: new ig.AnimationSheet( 'media/charset/char2.png#baFFba', 24, 32 ),
		blueSheet: new ig.AnimationSheet( 'media/charset/char2.png#ccccFF', 24, 32 ),
		yellowSheet: new ig.AnimationSheet( 'media/charset/char2.png#FFF020', 24, 32 ),
.......

//Called inside init()
colorChange: function() {
			switch (this.owner) {
				case 1:
					this.animSheet = this.blueSheet;
				break;
				case 2:
					this.animSheet = this.redSheet;
				break;
				case 3:
					this.animSheet = this.greenSheet;
				break;
				case 4:
					this.animSheet = this.yellowSheet;
				break;
			}
		},