I have created a function that enables me to draw an image on a hidden canvas temporarily in order to modify colors and change everything except solid black to a specific color while preserving the original white "shade".
However, when attempting to execute this function, the resulting color appears darker than expected.
In my function, I have set it up to replace the color with the new color minus the original color value, which has been subtracted from 255.
for(var i = 0; i < imageData.data.length; i+=4) {
if((imageData.data[i] != 0 &&
imageData.data[i + 1] != 0 &&
imageData.data[i + 2] != 0)) {
imageData.data[i] = newColor.r - (255 - imageData.data[i]);
imageData.data[i + 1] = newColor.g - (255 - imageData.data[i + 1]);
imageData.data[i + 2] = newColor.b - (255 - imageData.data[i + 2]);
if(imageData.data[i] > 255)
imageData.data[i] = 255;
if(imageData.data[i + 1] > 255)
imageData.data[i + 1] = 255;
if(imageData.data[i + 2] > 255)
imageData.data[i + 2] = 255;
}
}
When using the new color #44698B (r:68, g: 105, b:139) on a slightly greyer white #999 (153, 153, 153) section, the result came out as #000325 (0, 3, 36) instead of the expected #2F4860 (47, 72, 96).