Change color of a particular area of Image uploaded by User In canvas by Javascript

Question

I'm posting a website where you can visualize colors on a wall by uploading a photograph of your home. They are flood filling colors on the area where I'm clicking. They are creating shapes (maybe by detecting edges) over another canvas. Can anyone tell me how they have achieved it? Link to the site: https://www.visualizecolor.com/ppgpaints# .

And suggest if any js library exists that do the same.

Answer 1

I can see two different ways of doing this.

---

First idea

• You can to segment your canvas into sub areas thanks to an edge filter like Sobel or Canny filters for instance. JSFeat does the job : sobel filter example canny filter example
• Then you fill each zone by a custom a color by converting original color to HSV, you preserve saturation and brightness but replace hue value by the new one

---

Second idea

• You use a seeding algorithm which consists in spreading the new color to a pixel only if the distance between the original color and the targeted color (both in HSV) is under some threshold value