Estoy jugando con la idea de modificarmy desarrollo de juegos IDE para producir versiones HTML5 de los juegos creados con él. Una de las características del IDE es la capacidad de definir marcos, que no solo definen cómo se transforma una celda de gráficos (girada, estirada, etc.), sino también cómo se colorea cuando se dibuja. Entonces, si quisiera colinas verdes y colinas marrones y subidas y bajadas, solo necesitaría 1 gráfico definido para todos ellos, simplemente transformado y coloreado de manera diferente.

Puedo ver cómo un contexto de lienzo HTML5 me permitirá transformar los resultados de drawImage, pero no veo una forma práctica de modular los colores. Quiero poder decir, por ejemplo, R = 255, G = 255, B = 0, A = 127 y que ninguno de los canales azules (una versión teñida de amarillo del gráfico) se dibuje al 50% de translucidez (teniendo en cuenta que partes de la celda gráfica ya pueden ser translúcidas o transparentes).

¿Es posible? ¿O necesitarégetImageData y manipular los píxeles y las copias manipuladas en caché? Si necesito almacenar en caché copias manipuladas, ¿cuál es la mejor estructura de datos JavaScript para lograr esto? Creo que me gustaría algún tipo de diccionario donde la clave sea un índice de imagen y un RGBA compuesto como un valor único de alguna manera. Las búsquedas tendrían que ser muy rápidas porque potencialmente se realizarían para la mayoría de los mosaicos que se están dibujando.