Fill areas of a photo with different colors and siding types

We have an existing measurement product that was developed in php and javascript. The programmer has done an excellent job with this system. It allows a contractor to upload photos of a home and then using your mouse you can desing measurement areas by defining square and triangles within the photo itself and it calculates square footage based upon a preset scale. Now we'd like to take this project to the next level. We'd like to be able to change the color inside the measured areas to the color of the siding being chosen. We would then like the color of the siding to render in the areas alone. Potentially we might like to show the areas with the type of siding itself and color. Right now I'd like to start with color only and see if that can be accomplished. The color would be selected from a palet of avalable color choices and then filled in the chosen areas. If it's not possible them that's fine, but am curious if it is. You'd have to use php and javascript to handle this as the original system is in those languages. The points that make up the squares and triangles are stored for each photo in a MYSQL database. We have the file structure to provide and a test environment. Just need someone creative who might have an idea as to how this could work. thanks