change particular area of an image and fill color in that area

Edit Png Image For E.g change particular area and fill color in that area.

I want to change the color of an image only selected area. Like the first user selects a color then he chooses an image after that he can change the particular area of image color with the selected color.

After that he can save that image too Is it possible?? like Color company website uses this kind of thing.

like below URL https://www.sherwin-williams.com/visualizer#/active

Answer

Demo:

Full page: https://angularjs-rj88cu.stackblitz.io/

Code: https://stackblitz.com/edit/angularjs-rj88cu

Explanation:

The editor is an svg containing background image as <image> and areas as <path> both are created from editor.imageUrl and editor.areas

For downloading,

1. Background image is drawn on a canvas
2. SVG (without <image>) is converted to dataUrl and then drawn on canvas
3. Canvas is converted to dataUrl for downloading

Why canvas was not used instead of svg in the first place?

Because mouse interaction are difficult to implement in canvas and is much easier in inline svg as the work like DOM elements (hover pseudo class, click events, etc)

Also I assumed you wanted angularjs because you have tagged it (even though you have not mentioned in the question)

Also there are a lot of bad practices in the code like editor not being a component and styling input[type=color]‘s Shadow DOM (you can use some colorpicker plugin instead)

PS: Tell me if something needs to be changed