How to change the color of a png?

Question

I am trying to change the color of a simple png. The png holds just a simple shape with transparency. At the moment I am changing the color via canvas context:

var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var data = imageData.data;


for (var i = 0; i < data.length; i += 4) {
    data[i] = Kinetic.Util.getRGB(color).r;
    data[i + 1] = Kinetic.Util.getRGB(color).g;
    data[i + 2] = Kinetic.Util.getRGB(color).b;
}

// overwrite original image
context.putImageData(imageData, 0, 0);

In firefox it takes some time to render the canvas. So is there any other solution?

Regards, Rafael

Answer 1

It would be a hell of a lot faster if you put this before the loop:

var col = Kinetic.Util.getRGB(color);

Then used this in the loop:

data[i] = col.r;
data[i+1] = col.g;
data[i+2] = col.b;