"Quiero mantener el color anterior y poner el color transparente sobre él y combinarlos.
¿Cómo puedo hacer eso?"

Necesita interpolación en cada canal de color (R, G y B).

Al combinar el color A con el color B, también debe seleccionar un punto en la ruta de A a B (que va de 0 a 1). La interpolación te da el color en ese punto. Por ejemplo, 0.5 es la mitad, por lo que ese punto da una mezcla 50/50 de dos colores. Pruébalo con los colores Rojo y Azul (el resultado es un color Púrpura)

"¿Cómo calculo los valores RGB que necesito establecer para los píxeles?"

 var stepPoint = 0.5; //0.5 = 50% blend var new_Red = old_R + stepPoint * (transparent_R - old_R); var new_Green = old_G + stepPoint * (transparent_G - old_G); var new_Blue = old_B + stepPoint * (transparent_B - old_B); //# usage (after interpolation calculations) some_Image_Data [i+0] = new_Red; some_Image_Data [i+1] = new_Green; some_Image_Data [i+2] = new_Blue; //# or if you want to package as 32-bit integer of RGBA format //var mixedColor = ( new_Red << 24) | ( new_Green << 16) | ( new_Blue << 8) | (255);

Una forma más rápida/fácil podría ser simplemente ajustar el valor alfa de cada píxel en los datos de imagen "transparentes" . De esta manera, cuando el píxel se establece en otro imageData, ya tiene transparencia.

 var idx = 0; //# starting index position in bytes while (true) { if( idx >= some_Image_Data.length ) { break; } some_Image_Data[idx+3] = 128; //# set between 0-255... lower is more transparent idx += 4; //# move on to next pixel }